Javascript 对Material UI组件进行Jest测试，以模拟触发Redux操作功能的按钮单击事件

无法测试

按钮。在基于材质UI的组件上模拟（“单击”）

，该组件具有在其onClick prop上触发“loadAllData（）”函数的按钮

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

此组件的完整代码如下所示

const GithubMostPopularList=（）=>{
const globalStore=useSelector（state=>state.globalStore）
const dispatch=usedpatch（）
const loadAllData=（）=>{
const city=globalStore.city\u to\u搜索
setcurrentCityShown（城市）
调度（loadMostPopularUsers（城市、页面、行页面））
}
返回(
{globalStore.loading(
) : (
加载城市数据
)}
)
}
导出默认GitubMOSTPopularlist

下面是我的测试，它失败了，给了我`TypeError:cannotreadproperty'loadAllData'ofnull'

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

it（“按下按钮时应触发一次点击”，（）=>{
const wrapperComp=装载(
,
)
const spy1=jest.spyOn（wrapperComp.instance（），“loadAllData”）
const button=wrapperComp.find（button）.last（）
按钮。模拟（“单击”）
包装组件更新（）
预计（spy1）。已被催收时间（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);
});

从“@material ui/core/test utils/unwrap”导入展开；
const UnwrappedComponent:any=unwrap（（GithubMostPopularList与React.ReactElement一样未知））；
它（'按下按钮时应触发一次点击'，（）=>{
const wrapperComp=浅层（）；
spyOn（wrapperComp.instance（），'loadAllData'）；
const button=包装组件查找（按钮）；
按钮。模拟（'click'）；
wrapperComp.update（）；
期望（wrapperComp.instance（）.loadAllData）.toHaveBeenCalledTimes（1）；
});

尝试了该操作，但没有帮助，UnwrappedComponent和浅层渲染也会出现相同的错误-“TypeError:无法读取null的属性'loadAllData'”

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