Enzyme 中如何测试经过 Redux 包裹的组件？
在 React 开发中，我们通常使用 Redux 进行状态管理。而在测试前端组件时，我们可以使用 Enzyme 来测试这些被 Redux 包裹的组件。
Enzyme 是 React 测试工具箱中的一员，在 React 应用中提供了一个方便的 API，可以让我们轻松地模拟组件的行为和渲染结果。Enzyme 也支持对经过 Redux 包裹的组件进行测试。
下面我们来介绍如何使用 Enzyme 测试经过 Redux 包裹的组件。
- 安装 Enzyme
首先，我们需要安装 Enzyme。可以使用 npm 或者 yarn 进行安装，如下所示：
npm install --save-dev enzyme enzyme-adapter-react-xx
其中，xx 代表对应的 React 版本。比如，对于 React 16，我们需要安装 enzyme-adapter-react-16。
- 配置 Enzyme
安装完成后，我们需要在项目中设置 Enzyme 以使用适当的适配器来连接 React。可以在 src/setupTests.js 文件中进行设置，如下所示：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这将使 Enzyme 使用 react-16 适配器来连接 React。
- 编写测试代码
有了 Enzyme 和适配器的设置，在测试中就可以使用 Enzyme 提供的 API 来测试 React 组件。
下面我们来看一下如何测试一个经过 Redux 包裹的组件。假设该组件为一个计数器，可以增加、减少计数值。我们首先需要创建一个 Redux Store，为该组件提供状态以及 action。
-- -------------------- ---- -------
-- -----------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- ------------------
----- ------- ------- --------------- -
-------- -
----- - ------ ---------- --------- - - -----------
------ -
-----
---------- ------------
------- ------------------------------
------- ------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ ------------
---
----- ------------------ - -
----------
----------
--
------ ------- ------------------------ -----------------------------// actions.js
export const increment = () => ({
type: 'INCREMENT',
});
export const decrement = () => ({
type: 'DECREMENT',
});-- -------------------- ---- -------
-- -----------
----- ------------ - -
------ --
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-接下来，我们就可以编写测试代码了。使用 Enzyme 的 shallow 方法来浅渲染组件，并使用 Jest 来进行断言。
-- -------------------- ---- -------
-- ----------------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------- - ---- ---------
------ ------- ---- ------------------
------ -------------- ---- ----------------
------------------ ---- -- -- -
--- ------
--- --------
------------- -- -
----- - ---------------- ------ - ---
------- - --------
--------- --------------
-------- --
-----------
---------
---
----------- ------- -- -- -
---------------------------------------------- ----
---
-------------- ------- -- -- -
-----------------------------------------------
---------------------------------------------- ----
---
-------------- ------- -- -- -
-----------------------------------------------
---------------------------------------------- -----
---
---在测试代码中，我们使用 shallow 方法浅渲染组件，并用 Provider 包裹，将 Redux Store 传入组件。
在各个测试用例中，我们模拟用户在点击按钮后的行为，然后断言组件的渲染结果是否符合预期。
- 运行测试
最后，我们使用 Jest 来运行测试。运行测试前，需要在 package.json 文件中添加以下代码：
{
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
]
}
}然后，在终端中输入 npm test 或者 yarn test，就可以运行测试了。如果测试通过，将会在终端中看到绿色的提示。
总结
本文介绍了如何使用 Enzyme 来测试经过 Redux 包裹的组件。我们需要先安装和配置 Enzyme，使用 shallow 方法浅渲染组件，并使用 Provider 将 Redux Store 传入组件。最后，使用 Jest 进行测试，并断言组件的渲染结果是否符合预期。
测试对于前端开发来说非常重要，它可以帮助我们发现问题，提高代码质量。Enzyme 提供了非常方便的 API，可以帮助我们测试各种类型的 React 组件。希望本文可以帮助您更好地使用 Enzyme 来测试经过 Redux 包裹的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6549a1017d4982a6eb3d9d3b