前言：本文假设你已经有一定的 React 和 Redux 基础。
在测试 React 组件时，我们不仅需要关注组件的视图层，还要把整个组件的状态（包括 Redux state）模拟出来，以便我们随时检查组件的各种行为。
在这篇文章中，我将向您展示如何使用 Enzyme 工具来测试 React 组件，并模拟 Redux state。
Enzyme 简介
Enzyme 是一款由 Airbnb 开源社区发布的 JavaScript 测试工具，用于测试 React 组件。它提供了一个简洁和直观的 API，使得我们可以方便地测量 React 组件的输出。Enzyme 支持 Shallow Rendering、Full DOM Rendering 和 Static Rendering。
它为我们提供了一种轻松而灵活的方式来测试 React 组件，同时也提供雄厚的文档支持。
如何使用 Enzyme 来测试 React 组件
安装 Enzyme
在使用 Enzyme 前，我们需要安装它。可以使用 npm 或 yarn 安装。
# 使用 npm 安装 npm install --save-dev enzyme # 使用 yarn 安装 yarn add --dev enzyme
创建测试用例
在开始编写测试代码之前，我们需要先创建测试用例。Enzyme 可以与不同的测试框架一起使用，包括 Jest、Mocha、Chai 和 ava。
在本文中，我们将使用 Jest 作为我们的测试框架。
// setupTests.js
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });-- -------------------- ---- -------
-- -----------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
------ - -------- - ---- --------------
------ -------------- ---- ----------
----- ----- - -----------------
-------------- ---- -- -- -
----------- ------- ---------- -- -- -
----- ------- - ------
--------- --------------
---- --
-----------
--
------------------------------------
---
---模拟 Redux state
我们可以使用 Redux Mock Store 来模拟 Redux 状态。Redux Mock Store 是一个基于对象的存储。它允许我们轻松地创建一个模拟 store，以便我们在测试中能够轻松逼真地使用它。
我们可以在测试文件顶部引入模拟的 store，然后将其传递给渲染组件的 <Provider> 包装器。
-- -------------------- ---- -------
-- -----------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
------ - -------- - ---- --------------
------ -------------- ---- ----------
------ - --------- - ---- ----------------------------
----- ----- - --------------------------
-------------- ---- -- -- -
----------- ------- ---------- -- -- -
----- ------- - ------
--------- --------------
---- --
-----------
--
------------------------------------
---
---// __mocks__/reduxMockStore.js import configureMockStore from "redux-mock-store"; const mockStore = configureMockStore([]); export default mockStore;
结论
在本文中，我们已经了解到如何使用 Enzyme 测试 React 组件，并模拟 Redux state。我们可以使用 Redux Mock Store 轻松地创建一个模拟 store。这些技术都可以帮助我们更深入地了解 React 应用程序的内部工作。
现在，你有了一些关于如何创建一个测试用例的基本信息，开始编写你自己的测试用例吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671ffb952e7021665e0040c1