React / Redux 应用程序测试 - 使用 Jest 和 Enzyme-JavaScript中文网-JavaScript教程资源分享门户

React 和 Redux 已成为开发高性能应用程序的首选工具。但是，如何对这些库中的组件进行测试呢？在本文中，我们将介绍如何使用 Jest 和 Enzyme 对 React / Redux 应用程序进行测试，并提供一些示例代码。

什么是 Jest？

Jest 是 Facebook 开发的 JavaScript 测试框架，它提供了许多工具，包括测试用例运行器、断言库和代码覆盖率报告生成器。它的最大优点是它有一个非常容易上手的 API，因此，您可以在很短的时间内编写测试用例。

什么是 Enzyme？

Enzyme 是由 Airbnb 开发的 JavaScript 测试库。它为 React 提供了强大且更高级的渲染和操作支持。它使开发人员可以轻松地测试 React 组件的各种方面，包括 DOM 操作、属性和状态等。

第一步：创建测试环境

首先，我们需要在项目中配置测试环境，以便可以使用 Jest 和 Enzyme 来运行测试。以下是如何配置测试环境的步骤：

安装 Jest 和 Enzyme：在命令行中执行以下命令即可：
```
npm install --save-dev jest enzyme enzyme-adapter-react-16
```
我们需要安装 enzyme-adapter-react-16，因为我们将在 React 16 中测试组件。
在 package.json 中添加 Jest 的配置：
```
"jest": {
  "setupFilesAfterEnv": [
    "<rootDir>/testSetup.js"
  ]
}
```
这会告诉 Jest 在每次运行测试之前运行 testSetup.js。
在项目根目录下创建 testSetup.js 文件：
```
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });
```
这个文件告诉 Enzyme 该使用哪个适配器来测试 React 16 组件。
在 package.json 的 scripts 部分中添加一个新脚本：
```
"scripts": {
  "test": "jest"
}
```

现在，我们已经为测试应用程序设置了环境。

第二步：编写测试用例

让我们编写一个简单的测试用例来测试一个组件。以下是一个简单的组件：

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

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

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

这个组件只是返回一个带有标题和段落的 div 元素。

让我们编写一个测试用例来测试该组件。我们要测试三个方面：它是否渲染为含有正确类的 div、它是否渲染了正确的标头和它是否渲染了正确的段落。

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

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

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

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

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

现在，我们已经编写了一个简单的测试用例。这个测试用例通过浅层渲染组件，以及使用 Enzyme 判断它是否正确地渲染了类、标头和段落元素。

最后步骤：运行测试

最后一步是运行测试。为此，请在终端中运行以下命令：

npm test

如果您的测试用例通过，您将会在终端中看到一些绿色的勾号。如果您的测试用例失败，则会看到一些红色的十字章。

结论

在本文中，我们介绍了如何配置 Jest 和 Enzyme，以及编写 React / Redux 应用程序测试用例的基础知识。通过这些知识，您可以编写更多的测试用例来测试您的组件，这有助于减少错误并提高您的应用程序的可靠性。如果您有更多的测试用例和技巧，欢迎在评论中分享。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6774cfad6d66e0f9aaf0a603