在开发 React 应用程序时，测试是必不可少的。Jest 和 Enzyme 是两个流行的 JavaScript 测试框架，它们可以帮助我们轻松地测试 React 组件。本文将介绍如何使用 Jest 和 Enzyme 测试 React 应用程序。
什么是 Jest 和 Enzyme？
Jest 是 Facebook 开发的一个 JavaScript 测试框架，它可以用于测试 React 应用程序。Jest 提供了一个全面的测试套件，包括测试运行器、断言库和模拟库等。Jest 还可以与 Babel、Webpack 和 TypeScript 等其他工具集成。
Enzyme 是 Airbnb 开发的一个 React 组件测试工具，它可以帮助我们测试 React 组件的输出和行为。Enzyme 提供了一组简单的 API，可以轻松地查找、操作和断言组件的输出。Enzyme 还提供了多种渲染器，可以在不同的环境中测试组件。
安装 Jest 和 Enzyme
在使用 Jest 和 Enzyme 之前，需要先安装它们。可以使用 npm 或 yarn 安装 Jest 和 Enzyme。
# 安装 Jest npm install --save-dev jest # 安装 Enzyme npm install --save-dev enzyme enzyme-adapter-react-16
Enzyme 需要使用适配器来与 React 一起使用。根据你使用的 React 版本，可以选择不同的适配器。例如，如果你使用的是 React 16，可以安装 enzyme-adapter-react-16。
编写测试用例
在使用 Jest 和 Enzyme 测试 React 应用程序之前，需要创建测试文件夹，并在其中编写测试用例。测试用例通常与应用程序代码位于相同的目录中，但是以 .test.js 或 .spec.js 结尾。
测试组件输出
下面是一个简单的 React 组件，它接受一个 name 属性，并将其显示在页面上：
import React from 'react';
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
export default Greeting;我们可以使用 Enzyme 来测试该组件是否正确地显示了 name 属性。首先，需要导入 Enzyme 和适配器：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });然后，可以编写测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ -------- ---- -------------
------------------ -------- --- --------- ---
-------------------- -- -- -
----------- --- ------ -- -- -
----- ------- - ----------------- ------------ ----
---------------------------------------- ---------
---
---在上面的代码中，我们使用 shallow 渲染器来渲染组件，并断言其输出是否包含了正确的文本。shallow 渲染器只会渲染组件的直接子组件，而不会渲染它们的子组件。这使得我们可以轻松地测试组件的输出。
测试组件行为
除了测试组件输出之外，我们还可以使用 Enzyme 测试组件的行为。下面是一个简单的 React 组件，它有一个按钮，当用户单击该按钮时，会调用一个回调函数：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
------ ------- ------- ---------
------- --------------------------- -----------
------
--
-
------ ------- --------我们可以使用 Enzyme 来测试该组件是否正确地更新了状态。首先，需要编写测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ ------- ---- ------------
------------------ -------- --- --------- ---
------------------- -- -- -
-------------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------- - -------------- ----
----- ------ - -----------------------
-------------------------
----------------------------------------------- ------- - --------
---
---在上面的代码中，我们使用 mount 渲染器来渲染组件，并模拟单击按钮的操作。然后，我们断言组件是否正确地更新了状态。
测试异步代码
有时，我们需要测试异步代码，例如使用 AJAX 加载数据的组件。Jest 提供了多种方式来测试异步代码，例如使用回调函数、Promise 或 async/await。下面是一个简单的 React 组件，它使用 AJAX 加载数据：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
-------- ---------- -
----- ------- --------- - -------------
------------ -- -
--------------------------------- -- -
------------------------
---
-- ----
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
------ ------- ---------我们可以使用 Jest 的 async/await 语法来测试该组件是否正确地加载了数据。首先，需要编写测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ -------- ---- -------------
------ ----- ---- --------
------------------ -------- --- --------- ---
-------------------- -- -- -
--------- ----- ---- --- -------- ----- -- -- -
----- ---- - -- --- -- ----- ------- -- - --- -- ----- ----- ---
----------------------------- ---- ---
----- ------- - --------------- ----
----- --- --------------- -- -----------------------
------------------------------------------
---
---在上面的代码中，我们使用 mockResolvedValue 来模拟 AJAX 请求的响应。然后，我们使用 mount 渲染器来渲染组件，并等待异步操作完成。最后，我们断言组件是否正确地加载了数据。
运行测试
在编写测试用例之后，可以使用 Jest 运行测试。可以在 package.json 中添加一个 test 命令来运行测试：
{
"scripts": {
"test": "jest"
}
}然后，在命令行中运行 npm test 或 yarn test 即可运行测试。
总结
在本文中，我们介绍了如何使用 Jest 和 Enzyme 测试 React 应用程序。我们学习了如何测试组件输出、组件行为和异步代码。测试是开发 React 应用程序的重要部分，它可以帮助我们确保代码的质量和可靠性。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65faec25d10417a2226a5b6b