expect(jest.fn()). tohavebeencalledwith(…expected)在测试反应时出错.&

Question

我得到错误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:reactcopyfront-endnode_modulesjsdomlibjsdomlivinghelpersruntime-script-errors.js:62:24)
at innerInvokeEventListeners (C:reactcopyfront-endnode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:333:9)
at invokeEventListeners (C:reactcopyfront-endnode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:274:3)

这里有人能帮我一下吗?提前感谢

Answer 1

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

await act(() => {
SearchWrapper.find('button#submit2').simulate('click');
});
SearchWrapper.update(); // this one is not async so no need to wrap AFAIK

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

Answer 2

可能有两种情况，要么你没有模拟你的路由处理程序，如果你没有模拟句柄，模拟它，如果仍然得到相同的结果，那么你可能没有模拟你的导航，你可以尝试下面的方法。

Mocking useNavigate hook react router v6 : - 
const mockNavigate = jest.fn();
beforeEach(() => {
jest.spyOn(router, 'useNavigate').mockImplementation(() =>mockNavigate);
render(<YourComponent />, { route: '/path' });
});

或者你可以把这个放在你的测试上面:

const mockNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
...(jest.requireActual('react-router-dom') as any),
useNavigate: () => mockNavigate
})
);
//Put your tests below this