测试用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());

或者用另一种方式创造声音:

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了解更多背景信息。