前言
Jest 是一个 JavaScript 的测试框架，由 Facebook 开发，它可以测试 React 应用或纯 JavaScript 应用。Jest 在测试速度和简单性方面提供了极佳的体验，测试比其他框架块很多。
本文将会介绍 Jest 的一些核心特性以及使用指南。我们会从安装 Jest 开始，然后在接下来的章节中逐一深入探讨 Jest 的各个特性。
安装
使用 Jest 首先要进行安装。你可以通过 npm 进行全局安装：
$ npm install -g jest
或在项目中安装 Jest：
$ npm install jest
当安装完成之后，Jest 将会添加如下两个脚本到 package.json 中：
{
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
}
}test命令运行 Jest。test:watch命令在监视模式下运行 Jest ，以便对应用的任何变化进行测试。
Jest 的基本使用
下面我们来介绍 Jest 的基本使用，包括测试文件和模块的测试方法。
普通函数的测试
现在我们来尝试测试两个普通的 JavaScript 函数，其中一个函数的功能是将两个数相加，而另一个函数的功能是将一个字符串反转。我们将会一个一个示例地介绍如何使用 Jest 进行测试。
- 创建测试文件
首先，我们要创建一个测试文件。Jest 期望测试文件是与被测试模块相同的目录下具有 .test.js 或 .spec.js 扩展名的文件。因此，我们将会创建一个文件叫 math.test.js 用于测试用例如下：
-- -------------------- ---- ------- --- - ------- -- ------ -------- ------ -- - ------ - - -- - ------ -------- ------------------ - ------ --------------------------------- -
- 编写测试代码
接下来，我们要编写测试代码。Jest 中有两个重要的全局函数，用于编写和运行测试用例： describe 和 it。这两个函数可以帮助我们组织测试代码并生成易于阅读的测试报告。我们将会使用这些函数编写我们的测试代码。
-- -------------------- ---- -------
---
- ------------
--
------ - ---- ------------- - ---- ---------
------------- ---------- -- -- -
---------- --- --- --------- -- -- -
------------- ------------
------------- ------------
------------- -------------
---
---
----------------------- ---------- -- -- -
---------- ------- - -------- -- -- -
---------------------------------------------
---------------------------------------------
-----------------------------------------------
---
---在测试代码中，我们使用 describe 函数来定义测试用例。测试用例是一组逻辑相关的测试，可以描述某个功能或特性。
在测试用例中，我们使用 it 函数来具体描述一个测试用例。每个测试用例都应该有一个描述性的名称。例如，我们的第一个测试用例是“should add two numbers”，它描述了一个测试代码的功能。
在每个测试用例中，我们使用 Jest 中的 expect 函数来验证函数的输出。我们使用函数的输入和期望输出之间的断言来描述测试。断言是一种声明应该是真实的事物的表达式。在 Jest 中，断言是使用 expect 函数创建的。
React 组件的测试
Jest 可以轻松地测试 React 组件。我们来介绍一下如何测试 React 组件。
现在，我们要测试一个简单的 React 组件，该组件主要负责显示一个 props 属性。
- 创建测试文件
首先，我们要创建一个测试文件。Jest 期望测试文件是 .test.js 或 .spec.js 扩展名的文件，但是如果你要测试 React 组件，你经常会使用 .tsx 文件。因为我们要测试 React 组件，所以我们将会创建一个名为 my-component.test.tsx 的文件来测试我们的组件。
-- -------------------- ---- ------- --- - ---------------- -- ------ ----- ---- -------- --------- ---------------- - ------ ------- - ----- ------------ -------------------------- - ------- -- - ------ ------------------------- -- ------ ------- ------------
- 编写测试代码
接下来，我们要编写测试代码。对于 React 组件来说，测试的重点是检查组件是否正确渲染。在我们的例子中，我们需要检查组件是否渲染出了正确的 props 属性。
我们将会使用 react-testing-library 一款测试 React 组件的工具来帮助我们编写测试用例。 react-testing-library 不依赖任何DOM库，它可以轻松地测试 React 组件。
-- -------------------- ---- ------- --- - --------------------- -- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ ----------- ---- ----------------- ------------- --------- ---- ------- -- -- - ----- - --------- - - ------------------- ------------- ---- ----- ----------- - -------------------- ---------------------------------------- ---
在测试代码中，我们使用 render 函数来渲染 React 组件。我们使用 getByText 函数来查找组件中包含的文本。如果文本存在，那么测试就会通过。
Jest 指南
在接下来的章节中，我们将介绍 Jest 的一些高级特性，例如测试生命周期、测试异步代码等等。
测试生命周期
Jest 提供了可以在测试开始和结束时自动执行的生命周期钩子。我们可以在钩子函数中执行测试前/后的一些操作。例如，我们可以在测试运行之前创建一个数据库连接，在测试运行之后关闭数据库连接。
Jest 的生命周期钩子如下：
beforeAll: 在运行测试用例之前运行一次。在该块中设置或建立需要用于测试的状态或对象。在整个文件中只运行一次。beforeEach: 在每次运行测试之前运行。在该块中，您可以重置或更改测试中使用的任何状态或对象的初始值。afterAll: 在该文件的所有测试运行之后运行一次。afterEach: 在运行每个测试之后运行。在该块中，您可以进行清理或释放任何资源，以便测试始终在干净的状态下运行。
以下是一个使用生命周期函数的示例：
-- -------------------- ---- ------- ------------ -- - -- ---------------- --- ------------- -- - -- ---------------- --- ------------ -- - -- --------- --- ----------- -- - -- ------------------- ---
测试异步代码
在异步代码中有两种最常见的情况。一个是回调函数，另一个是 promise。Jest 可以测试这两种异步代码。
我们来看一个使用回调函数的例子。我们要测试一个异步函数，该函数从 API 中获取用户数据，并在获取完成时调用回调函数。
/**
* user.js
*/
export function getUserData(callback) {
setTimeout(() => {
callback({ name: '张三', age: 20 });
}, 1000);
}首先，我们来编写测试代码。
-- -------------------- ---- -------
---
- ------------
--
------ - ----------- - ---- ---------
----------------- ---- ---------- ------ -- -
-------- -------------- -
-----------------------------
--------------------------
-------
-
----------------------
---在测试代码中，我们使用 done 参数来告诉 Jest 这是一个异步测试，测试完成后需要手动调用 done 来标记测试完成。在此之前，Jest 会等待测试的返回结果。
接下来，我们来演示如何使用异步函数测试异步代码。首先，我们需要编写一个异步函数，该函数返回一个 Promise。
-- -------------------- ---- -------
---
- -------
--
------ -------- ------------- -
------ --- ----------------- -- -
------------- -- -
--------- ----- ----- ---- -- ---
-- ------
---
-接下来，我们将编写一个 Jest 测试代码。在测试代码中，我们使用 async 关键字定义一个异步测试。然后，我们使用 await 关键字等待函数返回结果。
-- -------------------- ---- ------- --- - ------------ -- ------ - ----------- - ---- --------- ----------------- ---- --------- ----- -- -- - ----- ---- - ----- -------------- ----------------------------- -------------------------- ---
在测试代码中，我们使用异步 getUserData() 函数来返回一个 Promise。在 expect 函数中，我们使用标准的形式进行断言，验证信息是否正确。
结论
Jest 是一个优秀的 JavaScript 测试框架，可以快速、高效地测试 React 组件或纯 JavaScript 应用。在本文中，我们介绍了 Jest 的安装、基本用法以及测试生命周期和测试异步代码。如果你不熟悉 Jest，那么本文就为你提供了一个入门指南。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67137563ad1e889fe20d1678