如何使用 Enzyme 测试 Redux Action?

阅读时长 3 分钟读完

在前端开发中,测试是非常重要的一环,可以帮助我们尽早发现 bug,提高代码的质量。在 Redux 中,Action 是状态变化的唯一来源,因此测试 Action 是非常必要的。

在本文中,我们将介绍如何使用 Enzyme 测试 Redux Action。

Enzyme 是什么?

Enzyme 是由 Airbnb 发布的一个针对 React 组件测试的 JavaScript 库。它提供了一系列的 API,可以让我们轻松地对组件进行渲染和断言。

在测试 Redux Action 时,我们需要使用 Enzyme 提供的 Shallow API,对 Action Creator 进行测试。

安装 Enzyme

首先,我们需要安装 Enzyme。可以通过 npm 或者 yarn 安装,命令如下:

或者

其中,适配 React 16 版本的 Adapter 需要安装 enzyme-adapter-react-16

编写测试用例

接下来,我们来编写一个简单的测试用例。假设我们有以下的 Action Creator:

它的作用是创建一个带有 ADD_TODO 类型和 text 字段的 Action。

现在,我们来编写测试用例,检验它是否正常工作。

-- -------------------- ---- -------
------ - -------- -------- - ---- ------------
------ - ------- - ---- ---------

----------------- -------- -- -- -
  ---------- ------ -- ------ -- --- - ------ -- -- -
    ----- ---- - -- --- ------
    ----- -------------- - -
      ----- ---------
      ----
    -
    ----------------------------------------------
  ---
---
展开代码

在这个测试用例中,我们首先导入了需要测试的 Action Creator 和 Enzyme 中的 shallow 方法。接着,我们编写了一个测试用例,使用 expect 断言来检测我们的 Action 是否返回了正确的类型和字段。

运行测试用例,如果没有报错,说明我们的 Action Creator 正常工作。

总结

使用 Enzyme 测试 Redux Action 是非常简单的。在测试用例中,我们只需要 import 我们的 Action Creator 和 Enzyme 提供的 shallow 方法,并进行断言即可。

更进一步来说,我们还可以对 Action 进行更复杂的测试,比如异步 Action 的测试等等。这些内容超出了本文的范围,感兴趣的读者可以去查看 Enzyme 的官方文档,深入学习。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64fe807495b1f8cacdd43a23

纠错
反馈

纠错反馈