简介
在前端开发中，单元测试是很重要的一环。通过单元测试我们可以尽早地发现 bug，保证代码质量，提高项目的可维护性和稳定性。而 Jest 和 Enzyme 则是目前最受前端开发者欢迎的单元测试框架。
Jest 是 Facebook 推出的一款基于 Jasmine 的 JavaScript 测试框架，Jest 在测试执行效率、API 设计、自动化测试和快照测试方面做了很多优化和创新。它使用自己的测试环境和断言库。
Enzyme 是 Airbnb 开源的 React 组件测试工具，提供了浅渲染、交互模拟等功能，使得 React 组件的单元测试变得非常的容易。
本文将重点介绍 Jest 和 Enzyme 的使用方法及实战练习。
环境准备
在开始之前，需要先安装 Node.js。可在命令行中运行以下命令检查是否安装成功：
node -v
如果显示出版本信息，即为安装成功。
Jest 上手
接下来，我们将通过一个简单的示例来演示 Jest 的使用方法。首先，我们需要在项目中安装 Jest：
npm install --save-dev jest
然后，我们创建一个测试文件，命名为 sum.test.js，并在其中编写测试代码：
function sum(a, b) {
return a + b;
}
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});在命令行中运行以下命令即可执行该测试：
npx jest
运行结果：
PASS ./sum.test.js ✓ adds 1 + 2 to equal 3 (3ms)
如果代码存在错误，则会报错。例如，在上述示例中，如果将 toBe 改为 toEqual，则会报错：
-- -------------------- ---- -------
---- -------------
- ---- - - - -- ----- - -----
- ---- - - - -- ----- -
---------------------------------- -- ---- --------
--------- -
--------- ------- ---------------------------------- -- ---- --------
--------- -
--------- - ---------- ---- -
-- ------------------ ------------------在 Jest 中还有很多其他的 API，例如 describe 用于组织测试用例。更多详细的 API 可以参考 Jest 官方文档。
Enzyme 上手
接下来，我们将通过一个简单的示例来演示 Enzyme 的使用方法。首先，我们需要在项目中安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
然后，在项目的 src/setupTests.js 文件中引入并配置 Enzyme：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });接着，我们创建一个组件文件 Button.js：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ ------- --------------- -
-------- -
----- - -------- ----- - - -----------
------ ------- -----------------------------------
-
-
------ ------- -------最后，我们编写测试文件 Button.test.js：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------ ---- ----------- ------------- ------ ------- -- -- - ----- ------- - --------------- ----------- -- --- ------------ --- ---- ----- ------ - ----------------------- --------------------------------- ----- ---
在命令行中运行以下命令即可执行该测试：
npx jest
运行结果：
PASS ./Button.test.js ✓ renders button label (7ms)
实战练习
接下来，我们将通过一个简单的练习来加深对 Jest 和 Enzyme 的掌握。
在练习中，我们将创建一个用户登录的表单组件 LoginForm.js，并对其进行单元测试。
首先，我们创建 LoginForm.js 组件文件：
-- -------------------- ---- -------
------ ----- ---- --------
----- --------- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
--------- --
--
-
----------------- - - -- -
--------------- ------ -------------- ---
--
-------------------- - - -- -
--------------- --------- -------------- ---
--
------------ - - -- -
-------------------
----- - ------ -------- - - -----------
-- ------ --- ------------------- -- -------- --- ----------- -
----------------------------
- ---- -
----------------------------
-
--
-------- -
----- - ------ -------- - - -----------
------ -
----- -----------------------------
-----
---------------------
------ ----------- ------------- --------------------------------- --
------
-----
------------------------
------ --------------- ---------------- ------------------------------------ --
------
-----
------- ----------------------------
------
-------
--
-
-
------ ------- ----------然后，我们创建 LoginForm.test.js 测试文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
------------- ------ -- -- -
----- ------- - ------------------ ----
--------------------------------------------
---
------------- ----- -------- -- -- -
----- ------- - ------------------ ----
----- ---------- - -----------------------------------
----------------------------- - ------- - ------ --------------------- - ---
----------------------------------------------------------
---
------------- -------- -------- -- -- -
----- ------- - ------------------ ----
----- ------------- - ---------------------------------------
-------------------------------- - ------- - ------ ----------------- - ---
---------------------------------------------------------
---
----------- -------------- ---- -- ---------- ------- -- -- -
----- -------------- - ----------
----- ------- - ------------------ ------------------------------- ----
----- ---------- - -----------------------------------
----------------------------- - ------- - ------ ------------------- - ---
----- ------------- - ---------------------------------------
-------------------------------- - ------- - ------ ---------- - ---
----- ---- - ---------------------
----------------------- - ---------------- -- ---
------------------------------------------
---
----------- -------------- ---- -- ------------ ------- -- -- -
----- -------------- - ----------
----- ------- - ------------------ ------------------------------- ----
----- ---------- - -----------------------------------
----------------------------- - ------- - ------ --------------------- - ---
----- ------------- - ---------------------------------------
-------------------------------- - ------- - ------ ----------------- - ---
----- ---- - ---------------------
----------------------- - ---------------- -- ---
------------------------------------------
---
---这里我们使用了 Jest 的 describe 来组织测试用例。
在测试文件中，我们编写了以下测试用例：
- 测试 LoginForm 组件是否可以正常渲染；
- 测试 LoginForm 组件的 email 和 password 是否可以正常双向绑定；
- 测试 LoginForm 组件在成功登录时是否可以调用 onLoginSuccess prop；
- 测试 LoginForm 组件在登录失败时是否可以调用 onLoginFailure prop。
在命令行中运行以下命令即可执行该测试：
npx jest
运行结果：
PASS ./LoginForm.test.js
LoginForm
✓ renders form (11ms)
✓ handles email change (7ms)
✓ handles password change (2ms)
✓ calls onLoginSuccess prop on successful login (3ms)
✓ calls onLoginFailure prop on unsuccessful login (2ms)至此，我们已经成功地使用 Jest 和 Enzyme 完成了一个简单的练习。
总结
通过本文的学习，我们可以初步了解 Jest 和 Enzyme 的使用方法，并通过一个实战练习来加深印象。当然，Jest 和 Enzyme 的功能非常强大，本文只是介绍了其中的一小部分，更多详情可以访问官方文档。
在开发过程中，单元测试不仅可以发现 bug，也可以帮助我们更好地理解代码逻辑。因此，我们强烈建议在项目中开启单元测试，并使用 Jest 和 Enzyme 进行单元测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651a2c9e95b1f8cacd22e581