Jest 入门指南：从零开始编写 JavaScript 单元测试

前言

在前端开发中，单元测试已经成为确保代码质量和稳定性的关键步骤。Jest 作为由 Facebook 开发和维护的功能强大的 JavaScript 测试框架，以其易于配置、丰富的功能和开箱即用的特性，成为众多开发者的首选工具。本文旨在引导你从零开始，逐步掌握如何在项目中高效使用 Jest，提升代码的可靠性和可维护性。

什么是 Jest？

Jest 是一个 JavaScript 测试框架，主要用于测试 React 应用程序，但它不仅仅限于此。它具有以下特点：

• 易于配置：默认配置已经涵盖了大多数用例。
• 零依赖：Jest 自带所有必要的依赖包，开箱即用。
• 强大的匹配器（Matchers）：提供了丰富的断言库。
• 快照测试：可以轻松进行 UI 组件的快照测试。
• Mock 功能：支持函数和模块的 Mock，便于测试隔离。

使用步骤

安装 Jest

首先，我们需要在项目中安装 Jest。

npm install --save-dev jest

安装完成后，我们可以在 package.json 中添加一个脚本来运行测试。打开 package.json，找到 “scripts” 部分，添加 “test”: “jest”：

"scripts": {"test": "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 函数来定义一个测试用例。expect 函数是 Jest 提供的断言工具，用来检查结果是否符合预期。

运行测试

现在，我们可以运行测试了。在终端中运行以下命令：

npm test

你应该会看到类似以下的信息：

 PASS  ./sum.test.js✓ adds 1 + 2 to equal 3 (5ms)

这表示我们的测试通过了！

进阶使用

测试异步代码

Jest 还支持测试异步代码。假设我们有一个异步函数 fetchData，它返回一个 Promise：

function fetchData() {return new Promise((resolve) => {setTimeout(() => {resolve('peanut butter');}, 1000);});
}module.exports = fetchData;

我们可以通过以下方式测试它：

const fetchData = require('./fetchData');test('the data is peanut butter', async () => {const data = await fetchData();expect(data).toBe('peanut butter');
});

使用 Mock

Jest 提供了强大的 Mock 功能，可以用于模拟函数和模块。假设我们有一个模块 utils.js，里面有一个函数 fetchData：

const axios = require('axios');function fetchData() {return axios.get('/data');
}module.exports = fetchData;

我们可以在测试中 Mock axios 模块：

jest.mock('axios');
const axios = require('axios');
const fetchData = require('./utils');test('fetches successfully data from an API', async () => {const data = { data: 'peanut butter' };axios.get.mockResolvedValue(data);const result = await fetchData();expect(result).toEqual(data);
});

快照测试

快照测试是 Jest 的一个独特功能，特别适合用于测试 UI 组件。快照测试会将组件的输出保存下来，并在以后的测试中与保存的快照进行比较。如果输出发生了变化，测试会失败。
假设我们有一个简单的 React 组件 Button.js：

import React from 'react';
function Button({ label }) {return (<button>{label}</button>);
}
export default Button;

我们可以为这个组件编写快照测试：

import React from 'react';
import renderer from 'react-test-renderer';
import Button from './Button';
test('Button renders correctly', () => {const tree = renderer.create(<Button label="Click me" />).toJSON();expect(tree).toMatchSnapshot();
});

第一次运行测试时，Jest 会创建一个快照文件，存储组件的渲染结果。之后每次运行测试，Jest 会将当前渲染结果与快照文件进行对比。如果有任何差异，测试将失败。

Mock 定时器函数

在测试异步代码时，有时我们需要控制时间流动。Jest 提供了 Mock 定时器函数的功能，让我们能够在测试中精确控制 setTimeout 和 setInterval 等函数。

jest.useFakeTimers();
test('waits 1 second before executing callback', () => {const callback = jest.fn();setTimeout(callback, 1000);// 快进时间jest.advanceTimersByTime(1000);expect(callback).toHaveBeenCalled();
});

参数化测试

在一些情况下，我们需要对不同的输入进行相同的测试。Jest 提供了 test.each 方法，可以用于参数化测试：

const sum = require('./sum');
test.each([[1, 1, 2],[1, 2, 3],[2, 2, 4],
])('sum(%i, %i) should equal %i', (a, b, expected) => {expect(sum(a, b)).toBe(expected);
});

总结

本文通过对 Jest 的基础用法和高级特性的介绍，展示了其作为 JavaScript 测试框架的强大能力。无论是单元测试、异步代码测试、快照测试还是 Mock 功能，Jest 都能为开发者提供简洁而有效的解决方案。