在现代的前端开发中，测试是不可或缺的一部分。自动化测试可以帮助我们更快速、高效地发现代码中的问题，以及避免出现潜在的 bug。而 Jest 则是一个非常实用的前端自动化测试工具。本文将介绍 Jest 的基础使用方法，并提供一些示例代码，帮助大家快速入门 Jest。
Jest 简介
Jest 是 Facebook 出品的一个 JavaScript 测试框架，专注于提供友好、零配置的测试体验。Jest 可以用于测试在浏览器中直接运行的 JavaScript 代码，也可以用于测试通过打包工具（如 Webpack）打包后的 JavaScript 代码。
Jest 的特点：
- 非常易于使用和安装；
- 内置断言库，无需另外引入其他测试工具；
- 自动化测试，减少手动测试的工作量；
- 可以进行快照测试，帮助我们更好地管理 DOM；
- 支持并行测试。
安装 Jest
我们首先需要在项目中安装 Jest。可以通过 npm 或 yarn 进行安装：
npm install jest --save-dev
yarn add jest --dev
编写测试用例
Jest 中的测试用例很灵活，支持多种格式。通常我们将测试用例的代码与待测试的代码放在同一目录下，且文件名以.test.js或.spec.js为后缀。我们将以一个用 Jest 测试一个简单函数的示例来介绍 Jest 的用法。
我们首先在项目目录下创建一个名为 sum.js 的文件，该文件中导出一个用于计算两个数之和的函数：
function sum(a, b) {
return a + b;
}
module.exports = sum;接着，我们需要创建一个名为 sum.test.js 的文件，用于编写测试用例：
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});我们可以看到，这个测试用例很简单。test() 方法用于定义一个测试用例，第一个参数表示测试用例的名称，第二个参数表示测试用例的具体代码。在我们的测试用例中，我们首先导入了 sum 函数，然后使用 expect() 方法以及 toBe() 匹配器来测试这个函数是否能正确地计算两个数的和。
运行 Jest
一般情况下，可以直接在命令行中运行 Jest，它会自动找到项目中所有的测试用例并执行。我们可以通过以下方式来运行 Jest：
npx jest
如果你想单独运行某个测试用例文件，可以通过以下方式：
npx jest sum.test.js
此外，Jest 还提供了很多可定制的选项和命令行参数。你可以通过输入以下命令来查看 Jest 的帮助文档：
npx jest --help
匹配器
Jest 具备自己的断言库，我们可以使用 Jest 中自带的匹配器来测试我们代码的正确程度。匹配器基本语法形式如下：
expect(value).matcher(expected)
这里我们将使用一些常用的匹配器来测试我们的代码。
1. toBe()
在测试中，我们通常需要比较两个值的相等性。在 Jest 中，我们可以使用 toBe() 匹配器来比较两个值是否完全相等。它使用了严格相等运算符来比较两个值。示例代码如下：
test('3 + 4 equals 7', () => {
expect(3 + 4).toBe(7);
});2. toEqual()
toEqual() 匹配器用于比较两个值是否相等。它不仅可以比较原始类型的值，还可以比较对象和数组。示例代码如下：
test('should add objects correctly', () => {
const obj1 = { a: 1 };
const obj2 = { a: 1 };
expect(obj1).toEqual(obj2);
});3. toMatch()
toMatch() 匹配器用于测试字符串是否包含指定的模式。可以使用正则表达式作为参数。示例代码如下：
test('the word "hello" contains the letter "e"', () => {
expect('hello').toMatch(/e/);
});4. toBeNull()
toBeNull() 匹配器用于测试值是否为 null。
test('null string', () => {
const n = null;
expect(n).toBeNull();
});5. toBeUndefined()
toBeUndefined() 匹配器用于测试值是否为 undefined。
test('undefined', () => {
const u = undefined;
expect(u).toBeUndefined();
});6. toBeTruthy()
toBeTruthy() 匹配器用于测试值是否为真值。
test('0 is a falsy value', () => {
const n = 0;
expect(n).not.toBeTruthy();
})7. toBeFalsy()
toBeFalsy() 匹配器用于测试值是否为假值。
test('null is a falsy value', () => {
const n = null;
expect(n).toBeFalsy();
});8. toContain()
toContain() 匹配器用于测试数组或可迭代对象是否包含一个特定值。
test('the list contains the name "Alice"', () => {
const list = ['Alice', 'Bob', 'Charlie'];
expect(list).toContain('Alice');
});更多的匹配器可以查看 Jest 官方文档。
异步测试
在实际应用中，我们往往需要测试异步操作的正确性，例如异步请求接口、读取本地文件等。Jest 提供了一些异步测试技术，帮助我们测试异步函数的正确性。
1. 回调函数
Jest 支持回调函数的方式测试异步代码，具体实现方式如下：
-- -------------------- ---- -------
--------- ---- -- ------ -------- ---- -- -
-------- -------------- -
--- -
------------------------- ---------
-------
- ----- ------- -
------------
-
-
--------------------
---其中，done 函数是 Jest 通过回调方式提供的，用于通知 Jest 异步测试已经完成。可以通过检查函数参数是否为 done 来判断 Jest 是否开始执行测试。
2. Promise 方式
我们也可以使用 Promise 的方式测试异步代码，具体实现方式如下：
test('the fetch data is peanut butter', () => {
return fetchData().then(data => {
expect(data).toBe('peanut butter');
});
});在这种情况下，Jest 会等待 Promise 返回结果。如果 Promise 被拒绝，则测试不会通过。
3. async/await
在这种情况下，Jest 会在异步操作结束前暂停测试执行。需要注意的是，在使用 async/await 的情况下，我们需要在测试用例函数定义时添加一个 async 关键字，如下所示：
test('the fetch data is peanut butter', async () => {
const data = await fetchData();
expect(data).toBe('peanut butter');
});快照测试
快照测试可以帮助我们更好地管理 DOM，以及检查我们的组件是否按照预期工作。在使用快照测试时，可以将组件渲染“快照”后，将其与先前保存的快照进行比较。
举个例子，我们可以使用以下代码测试一个 React 组件的输出是否符合预期:
test('renders correctly', () => {
const tree = renderer.create(<Button />).toJSON();
expect(tree).toMatchSnapshot();
});运行测试后，Jest 会在我们的项目中生成一个名为 __snapshots__/Button.test.js.snap 文件。当我们再次运行测试时，Jest 会将当前渲染的组件与先前的快照进行比较。如果两者相同，则测试通过。
结论
Jest 是一个非常强大的前端自动化测试工具。通过使用 Jest，我们可以快速编写测试用例，测试我们的代码是否符合预期。本文提供了 Jest 的基础使用方法，并介绍了一些常用的匹配器及异步测试方法。希望本文能够帮助大家更好地理解 Jest 的工作方式，并能够快速入门 Jest 的相关技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bf0dfd657e1f70dc53ec0