如何使用 jest.fn() 模拟调度

Question

比如我想知道派发了什么，参数是什么。动作创建者是异步的，但我不关心它的实现，我只想知道组件是否使用正确的参数分派正确的动作创建者。我试过这种方法：

store.dispatch = jest.fn()

但是我无法得到任何有用的信息:

我试过用这种方法解决问题：

expect(store.dispatch.mock.calls[0].toString()).toBe(requestArticles().toString())

但我不知道这个论点，但我敢肯定，有更好的方法可以做到这一点。另外值得注意的是，我正在使用 react-testing-library，所以我不能使用 Enzyme 中的 wrapper.instance().props。

Answer 1

如果你使用的是 react-redux hooks，你可以这样做：

import * as reactRedux from 'react-redux';

const mockDispatch = jest.fn();
const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch');

然后像往常一样对 mockDispatch 进行断言。

Answer 2

您可以模拟操作文件并检查操作是否已被调用。

例如假设 foo.action.js 是具有正在调度的操作的文件。

在导入组件之前在测试文件的开头，您可以将文件模拟为：

const yourActionMock = jest.fn();
jest.mock('<Path to the action file>/foo.action.js', () => ({
  yourAction: yourActionMock
}));

现在您可以测试调用的操作： expect(yourActionMock).toHaveBeenCalledWith(<args>)

How to mock dispatch with jest.fn()