Enzyme 是一个测试 React 组件的 JavaScript 库，它由 AirBnB 开源。Enzyme 提供了多种测试工具，可以方便快捷地测试 React 组件的各种场景和用例。在本篇文章中，我们将向您介绍如何使用 Enzyme 测试 React Redux 应用程序。
准备工作
在开始测试 React Redux 应用程序之前，需要先安装 Enzyme 和相应的依赖项。您可以使用以下命令安装它们：
npm i --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
其中，enzyme 是 Enzyme 库的主要包，enzyme-adapter-react-16 是用于 React 16 的适配器，react-test-renderer 是 React 的测试工具。
配置 Adapter
在使用 Enzyme 测试组件之前，需要先配置适配器。下面是一个简单的代码示例：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });测试组件
测试 Redux 连接的组件
在测试 Redux 连接的组件时，我们需要使用 enzyme 的 mount 方法来渲染该组件。在渲染组件之前，需要使用 redux-mock-store 创建一个 mock store。以下是一个简单的代码示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----- - ---- ---------
------ ------------------ ---- -------------------
------ -------------------- ---- --------------------------
----- --------- - ---------------------
----- ------------ - - -- --- -- --
----- ----- - ------------------------
------------ --------- ----------- -- -- -
--- --------
------------- -- -
------- - ------
--------- --------------
--------------------- --
-----------
--
---
---------- -------- -- -- -
----------------------------------------------------------------
---
-- ---
---测试未连接 Redux 的组件
在测试未连接 Redux 的组件时，我们可以使用 shallow 方法来渲染该组件。以下是一个简单的代码示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- -----------------
------------ ----------- -- -- -
--- --------
------------- -- -
------- - -------------------- ----
---
---------- -------- -- -- -
------------------------------------------------------
---
-- ---
---测试 Redux Action
在测试 Redux Action 时，我们可以使用 redux-mock-store。下面是一个简单的代码示例：
-- -------------------- ---- -------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ --------- ---- -------------
------ - -- ------- ---- -------------
----- ----------- - --------
----- --------- - --------------------------------
--------------- --------- -- -- -
------------ -- -
------------------
--------------------
---
----------- ------- ---- -------- ----- --- ---- ------ -- -- -
--------------------------- -
----- - -- ---- -------- ---- -- --
-------- - --------------- ------------------ -
---
----- --------------- - -
- ----- --------------- --
- ----- ---------------- ----- - -- ---- -------- ---- -- - -
--
----- ----- - --------------
------ -------------------------------------------- -- -
----------------------------------------------------
---
---
---测试 Redux Reducer
在测试 Redux Reducer 时，我们可以使用 Jest 作为测试框架。以下是一个简单的代码示例：
-- -------------------- ---- -------
------ ------- ---- -------------
------ - -------- -------- ------- - ---- -------------
------------------- -- -- -
---------- ------ --- ------- ------- -- -- -
------------------------- --------------
----------- ------
----- -----
------ ----
---
---
---------- ------ --------- -- -- -
-------
----------- -
----- -------
--
-----------
----------- ----
---
---
---------- ------ --------- -- -- -
-------
----------- -
----- --------
----- - -- ---- -------- ---- -- -
--
-----------
----------- ------
----- - -- ---- -------- ---- -- -
---
---
---------- ------ --------- -- -- -
-------
----------- -
----- --------
------ - -- ---- ----- ------- -- -
--
-----------
----------- ------
------ - -- ---- ----- ------- -- -
---
---
---总结
本文介绍了如何使用 Enzyme 测试 React Redux 应用程序。涉及了测试 Redux 连接的组件、未连接 Redux 的组件、Redux Action 和 Redux Reducer。希望这篇指南能够帮助您更好地进行前端测试，提高开发质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652a32307d4982a6ebc898c6