React 测试：Jest 与 Enzyme 的使用心得
前言
React 作为一种流行的前端框架，其应用在各种场景下体现着不同的极致。但在实际落地中，开发工程师不得不考虑很多问题，其中之一就是如何保证 React 组件的质量。
React 组件的测试一直是前端工程师需要关注的一个方面。在组件开发的过程中，最好每个组件都应该有一个相应工程师编写的测试。本文将分享一些 React 开发中使用 Jest 和 Enzyme 进行组件测试的方法和心得。
基础知识
在我们讨论如何使用 Jest 和 Enzyme 进行 React 组件测试之前，我们需要了解一些基础概念：
- Jest 是 Facebook 发布的一款 JavaScript 单元测试工具，它能够与 React 和 Node.js 环境集成使用，具有“快速、简单、安全”等特点；
- Enzyme 是 Airbnb 发布的 JavaScript 测试工具库，它可以方便地与 Jest 集成使用，提供了类似 jQuery 的 API，让我们可以更加灵活地操作测试组件。
安装与配置
Jest 安装
首先，我们来学习如何在项目中安装 Jest。我们可以使用 yarn 或 npm 进行安装，具体命令如下：
yarn add --dev jest # 或者 npm install --save-dev jest
安装完成后，我们需要在项目的根目录中创建一个名称为 jest.config.js 的文件，并在文件中添加以下基本配置：
-- -------------------- ---- -------
-------------- - -
---------------- -------- -- ----- --
-------------------- -
--------------------------- -- ---------
-----------------
--
--------------------- ------ ------ ----- -------
----------------- -
--------------------------- ---------------------
---------------------------- ---------------------------------------
--
---------- -
------------------------------
--------------------------------
--
---------- -
------------------ -------------
------------------ ----------
--
--Enzyme 安装
一旦 Jest 安装完成，我们就可以继续安装 Enzyme 了。这里也可以使用 yarn 或 npm 来安装，具体命令如下：
yarn add --dev enzyme enzyme-adapter-react-16 # 或者 npm install --save-dev enzyme enzyme-adapter-react-16
安装完毕后，我们需要在项目的配置文件中添加以下代码来进行适配：
// test/setup.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });在 package.json 中添加如下代码：
{
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/test/setup.js"
]
}
}编写测试用例
下面，我们将介绍如何编写简单的以及更高级的 JavaScript 和 React 组件测试用例。
示例 1: 简单的 JavaScript 测试用例
首先，我们在项目中创建一个叫做 math.js 的文件，并在其中编写一个基本的函数：
const math = {
sum: (a, b) => a + b,
multiply: (a, b) => a * b
}
module.exports = math现在，我们在项目中创建一个目录 test，并在其中创建一个名称为 math.test.js 的文件，然后开始编写简单的测试用例：
-- -------------------- ---- ------- ----- ---- - ------------------ ---------- - - - -- ----- --- -- -- - ------------------ ----------- -- ---------------- - - - -- ----- ---- -- -- - ----------------------- ------------ --
当我们运行 yarn test 或 npm run test 时，将会执行上述两个测试用例，如果所有的测试用例通过，Jest 将提示：“OK，2 tests passed”。
示例 2：React 组件测试
接下来，我们将会构建一个简单的盒子组件，然后编写相应的测试用例。我们假定这个组件代码位于 components/Box.js。
-- -------------------- ---- -------
------ ----- ---- -------
----- ------ - -
---------------- --------
---------- ---- --- --- ------- -- -- -----
-------- -------
------------- -----
-
------ ------- -- -------- -- -- -
---- ---------------
- -------- -
------
-测试内容如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ --- ---- ------------
-- ------ --- --------- ----- ------
----- ------- - ------------ ---
-------------- ---- -- -- -
----------- ---------- -- -- -
------------------ --------- ----- -------- --------- --
----------------------------- -------- ----------------------
--
----------- ---- -------- -- -- -
---------------------------------------------
--
--在上述代码中， we use the shallow() method from Enzyme to render a Box component which we then perform the tests on. We test that the component can render children by calling setProps() with the child text content, then using contains() to test if the child content was actually rendered.
We’re also testing that the component is rendered with styles by asserting that its style prop is equal to our previously-defined styles constant.
测试命令：
yarn test components/Box.test.js
总结
React 组件测试是前端开发中很重要的一个环节，而 Jest 和 Enzyme 这两个工具的出现，使得开发人员可以更加方便地调试和测试 React 组件。上述示例中提供了两个测试用例，引导读者了解了基本的 JavaScript 和 React 组件的编写方法，对深入探讨 React 组件测试有一定的指导作用。在实际应用中，请根据项目的需要合理运用这些方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d48c9db5eee0b525c19ed4