Jest Test компонента Material-UI для имитации события нажатия кнопки, чтобы запустить функцию Redux Action

Question

Невозможно протестировать button.simulate("click") для компонента на основе Material-UI, имеющего кнопку, которая запускает функцию loadAllData () на своем объекте onClick.

Ниже приведен мой компонент на основе хуков

Полный код этого компонента: здесь

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);
});