在 React 应用中，Redux 是状态管理的重要工具。Redux 通过 store 存储应用中的状态，并通过 reducer 处理 state 的变化。在开发过程中，我们需要对 Redux 的 state 变化进行测试，以确保应用的状态正确、可靠。在本文中，我们将介绍如何使用 Enzyme 在 React 应用中测试 Redux 的 state 变化。
Enzyme 简介
Enzyme 是 React 的一个测试工具库，它提供了一组 API 用于测试 React 组件。Enzyme 支持多种测试方式，包括渲染测试、交互测试和断言测试。使用 Enzyme 可以方便地测试 React 组件的行为和状态变化。
安装 Enzyme
在使用 Enzyme 进行测试之前，我们需要先安装它。可以使用 npm 或 yarn 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
配置 Enzyme
安装 Enzyme 后，我们需要配置 Enzyme 以在 React 应用中使用它。在项目的根目录下创建一个 setupTests.js 文件，并添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这样就完成了 Enzyme 的配置。
测试 Redux 的 state 变化
在 Redux 中，state 是不可变的。每次 state 发生变化时，都会返回一个新的 state 对象。因此，我们需要测试 Redux 的 state 是否正确更新。我们可以使用 Enzyme 中的 shallow 方法渲染一个组件，并检查组件的 props 是否正确更新。
以下是一个示例的 Redux store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
----- ----- - ---------------------
------ ------- ------我们可以使用 Enzyme 渲染一个组件，并在组件的 componentDidMount 生命周期钩子中 dispatch 一个 action，然后检查组件的 props 是否正确更新：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
------------- ----------- -- -- -
---------- ------ ----- ---- ---- --------- ------ -- ------------ -- -- -
----- ------- - --------
--------- --------------
---- --
------------
--
---------------- ----- ----------- ---
---------------------------------------------------
---
---------- ------ ----- ---- ---- --------- ------ -- ------------ -- -- -
----- ------- - --------
--------- --------------
---- --
------------
--
---------------- ----- ----------- ---
----------------------------------------------------
---
---在上面的示例中，我们使用 shallow 方法渲染了一个包装了 Redux store 的 Provider 组件，并在组件的 componentDidMount 生命周期钩子中 dispatch 了两个 action。然后我们检查了组件的 count prop 是否正确更新。
总结
使用 Enzyme 可以方便地测试 Redux 的 state 变化。我们可以使用 Enzyme 中的 shallow 方法渲染一个组件，并检查组件的 props 是否正确更新。在测试 Redux 的 state 变化时，我们需要注意 state 是不可变的，每次 state 发生变化时，都会返回一个新的 state 对象。在测试过程中，我们应该确保每个测试用例都是独立的，并避免测试用例之间的依赖。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656eae8fd2f5e1655d6e605d