1

我遇到错误TypeError: Cannot read property 'dispatchEvent' of null尝试运行酶测试以模拟onGridReadyag-grid 表时。

我的问题和卡住的地方......

  1. 我如何onGridReady正确地测试函数以使其不会出错并且我可以测试它是否被调用过一次？
  2. 如何测试其他功能onGridSizeChanged？
  3. Coverage 报告说我缺少setTableData要测试的线路 - 我如何测试该线路？

这就是 myfiles 的样子

我的表.tsx

imports...

const myTable: React.FC = () => {
  //intialize state variables

  const onGridReady = ({ api }: { api: GridApi }) => {
    setGridApi(api)
    api.sizeColumnsToFit()
    api.setHeaderHeight(10)
  }

  const onGridSizeChanged = () => {
    gridApi?.sizeColumnsToFit()
  }

  useEffect(() => {
    if (myTableData) {
      if (selectedCountryName !== '') {
        setTableData(objectCopy(myTableData))
      }
    }
  }, [myTableData, selectedCountryName])

  useEffect(() => {
    // do some stuff
  }, [businessDate])

  return <div className={'my-table'}>
    <Grid container spacing={12}>
      <div>
        <h1/>Title</h1>
      </div>
      <Grid item xs={12}>
        <div data-testid="my-table-grid">
          <AgGridReact
            containerProps={{ style: { height: `${containerHeight}px` } }}
            columnDefs={myTableColumns(moment(fromDate), moment(toDate))}
            onGridReady={onGridReady}
            onGridSizeChanged={onGridSizeChanged}
            onModelUpdated={onGridSizeChanged}
            rowData={tableData}
          />
        </div>
      </Grid>
    </Grid>
  </div >
}

export default myTable

myTable.test.tsx

import myTable from './myTable'
// other imports...

Enzyme.configure({ adapter: new Adapter() })

const onGridReady = jest.fn()

function setUpMyTableComponent() {
    const wrapper = shallow(
        <Provider store={store}>
            <myTable >
                <ColumnLayout>
                    <ColumnLayout>
                        <DataGrid onGridReady={onGridReady} />
                    </ColumnLayout>
                </ColumnLayout>
            </myTable >
        </Provider>
    )
    return { wrapper }
}

describe('myTable', () => {

    it('checking myTable', () => {
        const { wrapper } = setUpMyTableComponent()
        expect(wrapper).toBeDefined
        expect(wrapper.find('.my-table')).toBeDefined
    })

    it('simulate onGridReady', async () => {
        const { wrapper } = setUpMyTableComponent()
        const aggrid = wrapper.find(AgGridReact)
        dataGrid.simulate('onGridReady')
        await tick()
        expect(onGridReady).toHaveBeenCalled()
    })

    function tick() {
        return new Promise(resolve => {
            setTimeout(resolve, 0);
        })
    }

})
4

0 回答 0