测试中的expect(jest.fn()).toHaveBeenCalledWith(...expected)错误反应答案

【问题标题】：expect(jest.fn()).toHaveBeenCalledWith(...expected) error in testing react测试中的expect(jest.fn()).toHaveBeenCalledWith(...expected)错误反应
【发布时间】：2021-09-06 16:44:53
【问题描述】：

我收到错误 expect(jest.fn()).toHaveBeenCalledWith(...expected) 调用次数：0 .

代码：

There is a component  on submitting * as form value it will call formik on submit which will 
call api asyncronously
and storing data in searchResult.Then i am checking if entered value is * and length of 
response is greater than 1 then i am calling history.push on outside(i mean not inside any 
function)and it is working fine but when i am writing test cases for this it is showing no 
call generated.
const history = useHistory();
interface LocationRoute {
    pathname: string,
    state: any
}
if (searchResult.data&& formvalue == '*') {
    if (searchResult.data.length > 1) {
        console.log('length greater than 1')
        history.push({
            pathname: '/alldata',
            state: { "name": "John", "EndDate": "16-Jun-2024", "Id": "1252", "StartDate": "17-Jun-2020"}
        } as LocationRoute);
    }
    
}

测试用例：

const mockHistoryPush = jest.fn();

jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useHistory: () => ({
    push: mockHistoryPush,
}),
 }));
 describe()......starts
  
  it('should render card with data when clicked for *', async () => {
    SearchWrapper = mount(<CustomerSearch />);
   ..... checked before clicking submit...
   ......
   await act(async () => {

       SearchWrapper.find('button#submit2').simulate('click');
    });
    await act(async () => {
        SearchWrapper.update();
        
    });
    expect(mockHistoryPush).toHaveBeenCalledWith(locationStateMock2);

  }

而 locationstatemock2 是

export const locationStateMock2 = { "pathname": "/alldata", "state": { "name": "John", "EndDate": "16-Jun-2024", "Id": "1252", "StartDate": "17-Jun-2020"}}

我得到的错误是。

expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: {"pathname": "/alldata", "state":  { "name": "John", "EndDate": "16-Jun-2024", "Id": "1252", "StartDate": "17-Jun-2020"}}

Number of calls: 0

我正在使用我保存在代码“长度大于 1”中的控制台语句进行搜索我看到了这个错误

console.error
  Error: Uncaught [TypeError: Cannot read property 'push' of undefined]
      at reportException (C:\react\copy\front-end\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:62:24)
      at innerInvokeEventListeners (C:\react\copy\front-end\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:333:9)
      at invokeEventListeners (C:\react\copy\front-end\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:274:3)

谁能帮帮我。在此先感谢

【问题讨论】：

标签： reactjs unit-testing jestjs enzyme

【解决方案1】：

您可以尝试的一件事是删除一些异步，仅将触发 setState 的方法包含在 act 中。

await act(() => {
  SearchWrapper.find('button#submit2').simulate('click');
});

SearchWrapper.update(); // this one is not async so no need to wrap AFAIK

虽然我不能确定，因为没有显示点击处理程序。

【讨论】：