使用 createAsyncThunk 创建的测试 thunk

Question

我知道以前有人问过这个问题，但我想知道现在是否有了 redux-toolkit ("@reduxjs/toolkit": "^1.6.1") 的新更新版本，这可能会改变。

动作

const myThunk = createAsyncThunk('foobar', myService);

测试

import createStore from './store';
const store = createStore(somePreloadedState);

await store.dispatch(myThunk(someArgs));
expect(myService).toBeCalledWith(someArgs); // this worked fine

问题

由于服务调用中存在第二个参数，现在测试失败了：

someArgs, {"dispatch": [Function dispatch], "extra": undefined, "fulfillWithValue":...

我可以通过任何第二个参数来解决这个问题：

expect(myService).toBeCalledWith(someArgs, expect.anything());

或者以不同的方式创建 thunk：

const myThunk = createAsyncThunk('foobar', args => myService(args));

但如果我不需要，我宁愿不必更改所有这些，所以 这是新添加的东西吗？ 或者 我应该以任何方式模拟 createAsyncThunk 吗？

提前致谢！

Answer 1

createAsyncThunk 一直在传递第二个参数，只要它存在，所以这里没有任何变化，除了第二个参数在 1.6.0 中获得了一些额外的属性。

您的两种解决方法都是解决问题的有效方法，但您当然会有一些代码更改。

一般来说，你不应该模拟createAsyncThunk，这样测试它也可能没有太大的价值。

相反，我们建议使用 msw 之类的东西模拟您的实际 api 并进行集成测试，将 Redux 视为实现细节，而不是单独测试它。

有关更多背景信息，请参阅https://redux.js.org/usage/writing-tests。