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

Question

我正在研究如何使用 Jest 对我们项目的 Redux 代码进行单元测试。我一直在通读 'official' Redux recommendations, but our code differs from the Redux setup they're referencing since we used the Redux Tool Kit (RTK) and 'createSlice'，它使某些过程自动化，例如动作创建者的创建。我们如何对 RTK 和 createSlice 创建的 Redux 进行单元测试？因为，例如，动作创建者是自动创建的，测试它们是否有意义？一般来说，由于大部分 RTK 设置是自动的，我们需要测试什么？ Redux Tool Kit 是否有任何工具可以使这更容易？（我没有看到任何）。

此外，我们还设置了 Redux Thunks 'by hand'。我们看到了 Redux documentation recommends，但参考上面的内容，我们是否应该以不同的方式处理此测试，因为我们使用 RTK 和 createSlice 设置了主要的 Redux？

最后，API 通过 Apollo Client 调用 Redux 所依赖的运行。我看到 Apollo´s recommendations on how to test React with the React client. To test Redux, should we mock the Apollo Client using something like https://www.npmjs.com/package/mock-apollo-client 了吗？

Answer 1

亲自测试普通动作创建器从来没有任何真正的好处。验证 addTodo("buy milk") returns {type: "todos/addTodo", payload: "buy milk"} 并没有让我真正相信我的应用程序运行正常。

测试减速器与以往一样：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。）

Answer 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)
    })
})

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

How does one unit test Redux set up with Redux Tool Kit's 'createSlice'?

reactjs

redux

react-redux

react-apollo

redux-toolkit