Question

测试 React 时，expect(jest.fn()).toHaveBeenCalledWith(...expected) 出现错误

2021-09-05

14103

reactjs unit-testing jestjs enzyme

我收到错误 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)

有人可以在这里帮助我吗？提前谢谢

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