本文将介绍如何利用 Cypress 和 Enzyme 两个工具共同测试 React 组件，并提供最佳实践和指导意义。
什么是 Cypress 和 Enzyme？
Cypress 是一个现代化的前端端到端测试工具，它提供了极简的 API 和可靠的自动化测试，同时解决了传统测试工具的一些痛点。Cypress 支持用 JavaScript 编写测试用例，并提供了直接在浏览器中运行测试、可视化的测试结果、自带的调试器等功能，使前端测试变得更加高效和简单。
Enzyme 是一个 React 组件测试工具库，它提供了一系列的 API，可用于测试 React 组件的各种行为，并与 Jest、Mocha 等测试工具集成，支持快速、准确的测试 React 应用。
通过使用这两个工具，我们可以轻松地测试 React 组件。
Cypress 和 Enzyme 的优势
Cypress 和 Enzyme 的优势包括：
- Cypress 提供了直接在浏览器中运行测试、无需安装额外的依赖，即可完成端到端测试。
- Enzyme 提供了基于组件的测试工具，可以用于测试组件的多种行为。
- Cypress 和 Enzyme 结合使用，可以实现目前最全面和可靠的 React 组件测试。
如何使用 Cypress 和 Enzyme 测试 React 组件
安装 Cypress
使用 Cypress 测试 React 组件需要先安装 Cypress。可以在本地安装 Cypress，也可以使用 npm 全局安装 Cypress。以本地安装为例：
npm install cypress --save-dev
配置 Cypress
- 在项目的根目录下创建一个
cypress.json文件，并添加以下代码：
{
"baseUrl": "http://localhost:3000",
"integrationFolder": "./cypress/integration"
}其中 baseUrl 表示要在哪个 URL 上运行测试，integrationFolder 表示存放测试用例的目录。
- 在
package.json中添加以下代码，用于在运行npm run cypress:open命令时自动打开 Cypress：
"scripts": {
"cypress:open": "cypress open"
}安装 Enzyme
使用 Enzyme 测试 React 组件需要先安装 Enzyme。可以使用 npm 安装：
npm install enzyme react-test-renderer enzyme-adapter-react-16 --save-dev
配置 Enzyme
在项目中的 cypress/support/index.js 文件中添加以下代码：
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });最佳实践
测试 UI 组件
Cypress 和 Enzyme 可以很好地测试 UI 组件的各种行为。
以下是一个简单的 UI 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------ ------- --------- -
-------- -
----- - -------- ----- - - -----------
------ -
------- ------------------
-------
---------
--
-
-
------ ------- -------以下是一个 Cypress 测试用例，用于测试按钮是否能够正确地被点击：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- --------------------------
------ ------ ---- ---------------------------------
------------------ -- -- -
---------- -- ----------- -- -- -
----- ------- - ------------------------
------------- ----------------- ------------ --- ---
---------------
--------
-------- -- -
---------------------------------
---
---
---其中，cypress-react-unit-test 是一个用于将 React 组件集成到 Cypress 测试中的库。由于该库通过 cy.mount 将组件渲染到虚拟 DOM 中，故可以使用 cy.find 和 cy.click 等 Cypress API 清晰地测试组件的行为。
测试 Redux 组件
对于 Redux 组件，我们需要按照以下步骤来测试：
- 初始化 redux store
- 渲染组件并注入 store
- 测试组件行为
以下是一个示例 Redux 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ----------- - ---- ----------------
----- ------- ------- --------- -
--------------- - -- -- -
----- - ------ ----------- - - -----------
----------------- - ---
--
-------- -
----- - ----- - - -----------
------ -
-----
---- ---------------------------------
------- ------------------------------ -------------------------------
-
---------
------
--
-
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - - ----------- --
------ ------- --------
----------------
------------------
-----------以下是一个 Cypress 测试用例，用于测试 Redux 组件的行为：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- --------------------------
------ -------------- ---- -------------------
------ - -------- - ---- --------------
------ ------- ---- ----------------------------------
------ - ----------- - ---- -----------------------
----- --------- - -------------------
------------------- -- -- -
---------- --------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------------ - - ------ - --
----- ----- - ------------------------
----- --- - ---------------------------------
------
--------- --------------
-------- --
-----------
--
-------------------------------------------------------- -- -
-----------------------------
------------------------------
----- ---------------
-------- -
---
------------------------------------------------- -----
---
---
---在 Cypress 测试用例中，我们创建了一个 mock store，并将其注入到组件中。我们还使用了 store.spyMiddleware(updateCount) 来捕获 updateCount 函数的调用，以检查其是否被正确地调用。在测试中，我们模拟了用户点击按钮并检查 store 和组件是否得到了正确的更新。
结语
Cypress 和 Enzyme 是测试 React 组件的有力工具。通过本文的介绍，您应该已经了解了如何配置 Cypress 和 Enzyme，并了解了测试 UI 和 Redux 组件的最佳实践。我们鼓励您多尝试，将其应用到您的开发项目中，以提高测试的可靠性和效率。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67939625504e4ea9bd7ec091