Enzyme 测试 Redux 应用的正确方法
Redux 是一个流行的 JavaScript 应用程序状态管理库。随着应用程序的复杂度增加，我们需要测试我们的 Redux 应用程序以确保代码的正确性。Enzyme 是一个流行的测试库，它为我们提供了一种简化和自动化的方式来测试我们的 Redux 应用程序的各个部分。在本文中，我们将讨论如何使用 Enzyme 测试 Redux 应用程序的正确方法。
先决条件：
在本文中，我们假设您已经熟悉了 Redux 应用程序的基础知识。
- 设置
在使用 Enzyme 测试 Redux 应用程序之前，我们需要先配置 Enzyme。我们需要安装 Enzyme，并配置它以与我们的测试框架一起工作。在这里，我们将使用 Jest 作为我们的测试框架。
要安装 Enzyme，请在终端中首先输入以下命令：
npm install --save-dev enzyme
然后我们将使用 Enzyme 的 React 适配器进行配置，我们需要安装以下软件包：
npm install --save-dev enzyme-adapter-react-16
接下来，我们需要配置 Jest 与 Enzyme 一起工作。在您的 package.json 文件中，将测试脚本更改为以下内容：
"test": "jest --setupTestFrameworkScriptFile=./src/setupTests.js"
然后，我们需要在我们的 src 目录的新建一个 setupTests.js 文件，并添加以下代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });现在，我们已经成功配置了 Enzyme，可以开始测试 Redux 应用程序。
- 测试方法
2.1 测试组件
在测试 Redux 应用程序之前，我们需要先了解如何使用 Enzyme 测试组件。我们可以使用 Enzyme 的 shallow 方法来测试 React 组件，该方法仅渲染组件的浅层副本，因此不会渲染组件及其子组件的所有内容。
例如，让我们考虑以下组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ------- - -- ----- -- -- -
-----
------------ ------------
------
--
----------------- - -
------ ----------------------------
--
------ ------- --------我们使用以下测试方法来测试此组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------- ---- ------------- ----------- ------- ---------- -- -- - ---------------- --------- ---- --- ----------- --- ------- -- -- - ----- ------- - ---------------- --------- ---- ----- ---- - -------------------------- ------------------------------ ---- ---
在上面的代码中，我们使用 shallow 方法渲染了组件，并执行两个测试，一个测试用于确保组件正常渲染，而另一个测试用于确保组件向其子组件展示了正确的值。
2.2 测试 Redux 动作
接下来，我们将学习如何测试 Redux 动作。我们可以使用 toEqual 来检查我们的 Redux 动作功能是否正确。例如，让我们考虑以下 Redux 动作：
export const increment = () => ({
type: 'INCREMENT',
});
export const decrement = () => ({
type: 'DECREMENT',
});我们可以使用以下方法来测试此 Redux 动作：
-- -------------------- ---- -------
------ - ---------- --------- - ---- -------------
----------------- --------- -- -- -
---------- ------ -- ------ -- ----------- -- -- -
----- -------------- - -
----- ------------
--
--------------------------------------------
---
---------- ------ -- ------ -- ----------- -- -- -
----- -------------- - -
----- ------------
--
--------------------------------------------
---
---在上面的代码中，我们定义了两个测试，一个测试用于测试 increment 函数，另一个测试用于测试 decrement 函数。我们使用 toEqual 测试方法来检查我们的 Redux 动作功能是否正确。
2.3 测试 Redux Reducers
最后，我们将学习如何使用 Enzyme 测试 Redux Reducers。我们可以使用 toEqual 测试方法来检查我们的 Redux Reducer 是否返回了正确的状态。例如，让我们考虑以下 Redux Reducer：
-- -------------------- ---- -------
----- -------------- - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
--
------ ------- ---------------我们可以使用以下方法来测试此 Redux Reducer：
-- -------------------- ---- -------
------ -------------- ---- -------------
----------------- --------- -- -- -
---------- ------ --- ------- ------- -- -- -
-------------------------------- ----------------
---
---------- ------ ----------- -- -- -
------------------------ - ----- ----------- ---------------
---
---------- ------ ----------- -- -- -
------------------------ - ----- ----------- ---------------
---
---在上面的代码中，我们定义了三个测试，一个测试用于测试初始化状态，另两个测试用于测试 Redux 动作的处理方式。我们使用 toEqual 测试方法来检查我们的 Redux Reducer 是否返回了正确的状态。
- 结论
在本文中，我们学习了如何使用 Enzyme 测试 Redux 应用程序的不同方面。我们了解了如何测试组件、Redux 动作和 Redux Reducer。这些测试有助于确保我们的 Redux 应用程序的正确性，并帮助在开发过程中发现问题。尽管本文只提到了 Enzyme，而且对于 Redux 应用程序的完整测试，我们可能需要使用其他测试库或技术，但 Enzyme 是 React 应用程序中使用的一种流行测试库之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f238e1a44b36ee5764c969