React Redux -在特定的笑话测试中模拟useDispatch

Question

我试图在一个特定的测试中模拟useDispatch。我试着这样嘲笑:

import * as reactRedux from "react-redux";

const useDispatchMock = jest.spyOn(reactRedux, "useDispatch");

运行测试时，useDispatch仍然是一个正常的功能。

使用Jest26.6.3React Redux7.2.4

Answer 1

您所做的是正确的，但是您只是在模拟钩子，但是我们需要的是模拟useDispatch函数的返回值。

所以你需要做这个

const useDispatchSpy = jest.spyOn(reactRedux , 'useDispatch');
const mockDispatchFn = jest.fn();
useDispatchSpy.mockReturnValue(mockDispatchFn);

现在，无论何时在代码中进行分派调用，您都可以使用mockDispatchFn轻松断言它。这很方便，因为现在jest mock函数上可访问的所有方法现在都可以在mockDispatchFn上使用。

您可以像

那样测试分派的动作

expect(mockDispatchFn.mock.calls[0][0]).toMatchObject({ type: 'FETCHING_USER'});

Answer 2

我更愿意做的是创建一个进入提供者的模拟存储

const store = {
dispatch: jest.fn(),
getState: () => mockState
};
render(<provider store={store}><Component {...props}/></provider>);

下面的断言

expect(store.dispatch).toHaveBeenCalledWith(action);