Material-UI 组件的 Jest 测试以模拟按钮单击事件以触发 Redux Action 功能

Question

无法在基于 Material-UI 的组件上测试 button.simulate("click")，该组件具有在其 onClick 属性上触发“loadAllData()”功能的按钮。

下面是我的基于钩子的组件

这个组件的完整代码是here

const GithubMostPopularList = () => {
  const globalStore = useSelector(state => state.globalStore)
  const dispatch = useDispatch()

  const loadAllData = () => {
    const city = globalStore.city_to_search
    setcurrentCityShown(city)
    dispatch(loadMostPopularUsers(city, page, rowsPerPage))
  }

  return (
    <div className={classes.container}>
      <div className={classes.tableAndFabContainer}>
        {globalStore.loading ? (
          <div className={classes.spinner}>
            <LoadingSpinner />
          </div>
        ) : (
          <div className={classes.table}>            
            <div className={classes.inputandButtonContainer}>
              <Button
                onClick={loadAllData}
                variant="contained"
                size="large"
                color="primary"
                disabled={globalStore.city_to_search === ""}
              >
                <Typography
                  variant="h3"
                  className={classes.modalButtonLabelEnabled}
                >
                  Load City Data
                </Typography>
              </Button>
            </div>
            <div style={{ marginTop: "20px" }}>
              <EachUserListItem
                currentCityShown={currentCityShown}
              ></EachUserListItem>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}


export default GithubMostPopularList

下面是我的测试，它没有给我 `TypeError: Cannot read property 'loadAllData' of null'

  it("should trigger onClick on on Button press", () => {
    const wrapperComp = mount(
      <Provider store={store}>
        <MuiThemeProvider theme={globalTheme}>
          <GithubMostPopularList />
        </MuiThemeProvider>
      </Provider>,
    )

    const spy1 = jest.spyOn(wrapperComp.instance(), "loadAllData")
    const button = wrapperComp.find(Button).last()
    button.simulate("click")
    wrapperComp.update()   

    expect(spy1).toHaveBeenCalledTimes(1)
  })

非常感谢任何指导或帮助。

Answer 1

我假设您必须使用 mount 来避免在没有提供程序的情况下浅化材质组件的错误。

但这是我通常做的。我打开组件，然后将其变浅就可以了。

import unwrap from '@material-ui/core/test-utils/unwrap';

const UnwrappedComponent: any = unwrap((GithubMostPopularList as unknown as React.ReactElement<any>));

it('should trigger onClick on on Button press', () => {
    const wrapperComp = shallow(<UnwrappedComponent />);
    jest.spyOn(wrapperComp.instance(), 'loadAllData');
    const button = wrapperComp.find(Button);
    button.simulate('click');
    wrapperComp.update();
    expect(wrapperComp.instance().loadAllData).toHaveBeenCalledTimes(1);
});