如何使用 Redux Tool Kit 的“createSlice”设置一个单元测试 Redux？

Posted 2023-02-22

【中文标题】如何使用 Redux Tool Kit 的“createSlice”设置一个单元测试 Redux？

【英文标题】：How does one unit test Redux set up with Redux Tool Kit's 'createSlice'?

【发布时间】：2020-09-06 15:17:18

【问题描述】：

我正在研究如何使用 Jest 对我们项目的 Redux 代码进行单元测试。我一直在阅读'official' Redux recommendations，但我们的代码与他们引用的 Redux 设置不同，因为我们使用了Redux Tool Kit (RTK) 和“createSlice”，它可以自动执行一些过程，例如操作创作者创作。我们如何对 RTK 和createSlice 创建的 Redux 进行单元测试？例如，因为动作创建者是自动创建的，所以测试它们是否有意义？一般来说，由于大部分 RTK 设置是自动的，我们需要测试什么？ Redux Tool Kit 是否有任何工具可以使这更容易？ （我没有看到任何）。

此外，我们还有“手动”设置的 Redux Thunks。我们看到 Redux documentation recommends 是什么，但是参考上面的内容，既然我们使用 RTK 和 createSlice 设置了主 Redux，我们是否应该以不同的方式处理这个测试？

最后，Redux 所依赖的 API 调用通过 Apollo Client 运行。我看到Apollo´s recommendations on how to test React with the React client。为了测试 Redux，我们应该使用类似 https://www.npmjs.com/package/mock-apollo-client 的东西来模拟 Apollo 客户端吗？

【参考方案1】：

自己测试普通动作创建者从来没有任何真正的好处。验证 addTodo("buy milk") 是否返回 type: "todos/addTodo", payload: "buy milk" 并不能让我真正相信我的应用程序运行正常。

测试reducer 与以往一样：const actual = reducer(testState, someAction) 和expect(actual).toEqual(expected)。

测试 thunk 可能有也可能没有实际好处。特别是，如果您使用的是RTK's createAsyncThunk API，那么测试它们可能没有多大意义，因为大部分逻辑来自 RTK 本身。

（注意there's an open PR to rework that Redux testing docs page。）

【参考方案2】：

您可以将操作导入您的测试文件，就像您在组件中导入一样。

import  setApiInProgress  from '../src/blom/redux/api/apislice'

describe('actions', () => 
    it('should create an action to add a todo', () => 
      const payload = false
      const expectedAction = 
        type: 'api/setApiInProgress',
        payload
      
      expect(setApiInProgress(true)).toEqual(expectedAction)
    )
)