当我们开发 React 应用时，我们通常需要测试我们的组件以确保它们的正确性和可靠性。在本文中，我们将介绍如何使用 Enzyme 这个 JavaScript 测试工具来测试 React Redux 组件。
Enzyme 是由 airbnb 开发的一个 React 测试工具，它能够方便地模拟 React 组件的渲染和交互行为。Enzyme 为我们提供了一组 API，可以让我们在测试中轻松地访问和操作 React 组件的内部状态和属性。
安装 Enzyme
首先我们需要安装 Enzyme。可以使用 npm 或 yarn 进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16
或
yarn add --dev enzyme enzyme-adapter-react-16
需要注意的是，我们还需要安装适配 React 16 版本的 Enzyme 适配器 enzyme-adapter-react-16。如果你使用的是 React 的其他版本，需要根据版本号安装对应的适配器。
配置 Enzyme
在我们开始编写测试用例之前，我们需要配置 Enzyme。在 setupTests.js（如果没有则需要创建） 中添加以下内容：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这样就完成了 Enzyme 的配置。
测试 React Redux 组件
下面我们来编写一个测试用例来测试一个包含 Redux 组件的 React 组件。假设我们有一个 App.js 文件，其中包含了一个 UserList 组件，它渲染了一组用户的名字，并且从 Redux store 中获取了数据。这个组件的代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- ------------
----- -------- ------- --------------- -
------------------- -
------------------------
-
-------- -
----- ----- - ------------------------- -- --- --------------------------------
------ -----------------
-
-
----- --------------- - ----- -- --
------ ------------
---
------ ------- --------
----------------
- ---------- -
------------这个组件从 Redux store 中获取了一组用户的数据。我们需要编写一个测试用例来测试这个组件是否正确地渲染了这些用户的名字。
测试组件的渲染结果
我们可以使用 Enzyme 的 shallow 函数来测试组件的渲染结果。这个函数将渲染组件的浅层副本，并且返回一个 ShallowWrapper 对象，可以让我们访问和断言组件的渲染结果。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ -------- ---- --------
------------------ -------- --- --------- ---
------------------- ---- -- -- -
----------- - ---- -- ------- -- -- -
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
--
----- ------- - ----------------- ------------- ----
-----------------------------------------------------------------
------------------------------------------------------------
------------------------------------------------------------
------------------------------------------------------------
---
---在上面的测试用例中，我们传入了一个包含三个用户信息的数组，然后使用 shallow 函数渲染 <UserList> 组件，并且断言组件渲染出的 HTML 结构是否符合预期。我们使用了 Enzyme 的 find 和 children 函数来获取、遍历 <ul> 和 <li> 元素，并且断言它们的个数是否与给定数组的长度一致。我们使用了 at 函数来访问并断言每个 <li> 元素的文本内容是否符合预期。
测试 Redux store
上面的测试用例测试了组件的渲染结果是否正确，但没有测试获取 Redux store 中的数据是否正常运作。为了测试 Redux store，我们需要使用 Enzyme 的 mount 函数来完全渲染组件，并且将 store 传递给组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ ----- ---- --------------
------ -------- ---- ----------------------
------ -------- ---- --------
------ ----------- ---- -------------
------------------ -------- --- --------- ---
------------------- ---- -- -- -
----------- --- ---- -- ------- -- -- -
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
--
----- ----- - ------------------------ ------------------------
----- ---------- - ------------------------------ ---------------------
----- ------- - ------
--------- --------------
--------- --
-----------
--
--------------------------------------
----------------------------------------------
------------------------------------------------------
------------------
---
---在上面的测试用例中，我们首先创建了一个包含三个用户信息的数组，并且通过 createStore 函数创建一个 Redux store。然后我们使用 jest.spyOn 函数来检测组件的 componentDidMount 函数是否被调用，并且使用 mount 函数完全渲染了 <UserList> 组件，并且将 store 传递给了组件。我们断言了两个重要的事情：store 中的用户数据是否等于预期的数组，以及 <li> 元素的个数是否与数组长度一致。最后，我们使用 unmount 函数卸载了测试用例中创建的组件。
总结
在本文中，我们介绍了如何使用 Enzyme 测试 React Redux 组件，并且编写了两个简单的测试用例来测试组件的渲染结果和 Redux store 中的数据。对于一个真正的应用而言，测试用例会更加复杂，并且会覆盖更多的逻辑和组件。通过阅读本文，你已经了解了 Enzyme 的基本使用方法，可以更加自信地编写测试用例来测试你的 React 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3be8148841e9894ffa9ed