在开发 React 网站应用时，测试是不可避免的一步。Jest 是一个非常流行的 JavaScript 测试框架，它为我们提供了一种方便的方式来编写和运行测试用例。本文将介绍如何使用 Jest 快速集成测试 React 项目。
集成 Jest
在您的项目中集成 Jest 非常简单。首先，我们需要安装 Jest 和 Enzyme 两个库。
npm install --save-dev jest enzyme enzyme-adapter-react-16
这里我们也使用了 Enzyme 库，它为 React 测试提供了一些帮助。
然后，在您的 package.json 文件中添加命令以运行 Jest 测试：
{
"scripts": {
"test": "jest"
}
}最后，为了确保 Jest 和 Enzyme 与 React 所需的版本兼容，您需要在 src/setupTests.js 文件中添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });快速开始
现在我们已经将 Jest 集成到项目中了，我们可以开始编写我们的第一个测试用例。
假设我们有一个名为 Button 的 React 组件，将渲染一个带有 'Submit' 文本的按钮。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - -- -- -
------ -
-----------------------
--
-
------ ------- -------在我们运行测试之前，我们需要创建一个测试文件来测试这个组件。在我们的 src 目录中，我们创建一个 Button.test.js 文件，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
----------------- ---- -- -- -
----------- - ------ ---- -------- ------ -- -- -
----- ------- - --------------- ----
--------------------------------------------------------
---
---在这个测试中，我们使用了 shallow 方法来创建一个浅渲染，并渲染我们的组件。我们添加了一个断言来确保我们的按钮的文本是 'Submit'。
运行 npm test 命令，Jest 将运行我们的测试用例，我们将得到如下输出结果：
-- -------------------- ---- -------
---- ------------------
------- --
- ------- - ------ ---- -------- ---- -----
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- -----
--- --- ---- -------我们的测试用例已经通过了！
更复杂的测试
现在，我们来看看更复杂的测试场景。假设我们有一个名为 Form 的 React 组件，它包含一个文本输入和一个提交按钮。当用户点击提交按钮时，我们将创建一个新的项目，并将它添加到列表中。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ---- - -- ---------- -- -- -
----- ------ -------- - -------------
----- ------------ - - -- -
------------------------
--
----- ------------ - - -- -
-------------------
-----------------
------------
--
------ -
----- ------------------------
------ ----------- ------------ ----------------------- --
------- ----------------- ----------------
-------
--
--
------ ------- -----我们需要测试组件是否正确渲染，并且可以添加新项目到列表中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ---- ---- ---------
--------------- ---- -- -- -
--- --------
------------- -- -
------- - ----------- ----
---
----------- -- ----- --- - -------- -- -- -
----------------------------------------------
-----------------------------------------------
---
----------- ----- -------- -- -- -
---------------------------------------- - ------- - ------ ---- -------- - ---
-------------------------------------------------------- ----------
---
----------- ---- -------- -- -- -
----- ---------- - ----------
----- -------------- - ----------
------------------ ---------- ---
---------------------------------------- - ------- - ------ ---- -------- - ---
--------------------------------------- - -------------- ---
-------------------------------------------- ----------
------------------------------------------
---
---在这个测试中，我们使用了 mount 方法来创建一个完整的渲染，并渲染我们的组件。我们使用 beforeEach 方法在每个测试前创建一个新的渲染，以保持测试的独立性。
我们使用了 jest.fn() 方法来创建一个假函数来模拟添加新项目的行为，并断言该函数在点击提交按钮时被调用。
我们还模拟了 preventDefault 行为以确保表单不会真正提交。
运行 npm test 命令，Jest 将运行我们的测试用例，我们将得到如下输出结果：
-- -------------------- ---- -------
---- ----------------
----- --
- ------- -- ----- --- - ------ ------
- ------- ----- ------ -----
- ------- ---- ------ ------
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ------
--- --- ---- -------我们的测试用例已经通过了！
结论
在这篇文章中，我们使用 Jest 和 Enzyme 快速集成测试了 React 项目。我们编写了一些简单和复杂的测试用例来测试 React 组件，展示了 Jest 和 Enzyme 的使用方法以及编写测试用例的最佳实践。希望这篇文章对您了解 React 测试有所帮助！
示例代码
您可以在 Github 仓库 中查看完整的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f0f6106fbf960197349d4e