Jest 测试框架基础入门-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，测试是非常重要的一部分。测试可以帮助我们保证代码的质量，减少 bug 出现的机会。Jest 是一个非常流行的 JavaScript 测试框架，它简单易用，功能强大，而且支持常见的前端开发工具。本文将介绍 Jest 测试框架的基础用法，帮助读者快速上手 Jest。

Jest 是什么

Jest 是一个由 Facebook 开发的 JavaScript 测试框架，主要用于编写单元测试和集成测试。它具有以下特点：

简单易用：Jest 提供了简洁的 API，使得编写测试非常方便。
速度快：Jest 运行测试时可以自动选择并发运行，提高测试效率。
强大的 Mock 功能：Jest 允许我们轻松地 Mock 掉依赖，使得测试更加稳定。
支持多种前端开发工具：Jest 可以集成到常见的前端开发工具中，例如 React、Vue 等。

安装 Jest

在开始使用 Jest 之前，我们需要先安装 Jest。可以使用 npm 进行安装：

npm install jest --save-dev

安装完成后，我们可以通过运行以下命令来测试 Jest 是否安装成功：

./node_modules/.bin/jest --version

如果提示 Jest 的版本号，则表示安装成功。

编写一份简单的测试

接下来，我们将编写一份简单的测试。假设我们有一个名为 add 的函数，用于两个数相加：

function add(a, b) {
  return a + b;
}

我们的测试代码将会查看 add 函数能否正确相加两个数字。首先，我们需要创建一个名为 add.test.js 的文件，并编写如下的测试代码：

const add = require('./add');

test('add 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

在这段代码中，我们使用了 Jest 提供的 test 函数，它接受两个参数：一个字符串作为测试的描述，一个函数作为实际的测试逻辑。在该测试中，我们调用了 add 函数并期望它的返回值为 3。如果测试失败，则会抛出一个错误。运行测试的命令为：

./node_modules/.bin/jest

如果测试通过，则会输出一行绿色的字样：

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

expect 匹配器

在上面的测试中，我们使用了 expect 函数来断言测试的结果。expect 函数是 Jest 中最重要的函数之一，它可以帮助我们写出简洁、易懂的测试代码。

常见的 expect 匹配器

以下是一些常见的 expect 匹配器：

toBe：判断两个值是否相等，使用 Object.is 实现。
toEqual：检查两个对象之间的值是否相等，会递归检查对象每个字段的值。
toMatch：可以使用正则表达式检查字符串是否满足某种模式。
toBeDefined：用来判断变量是否被定义。
toBeNull：用来判断值是否为 null。
toBeTruthy：用来判断值是否为真。
toBeFalsy：用来判断值是否为假。
toContain：用来判断一个值是否包含在列表中。
toBeLessThan：用来判断一个值是否小于某个值。
toBeGreaterThan：用来判断一个值是否大于某个值。
toThrow：用来判断一个函数是否抛出了错误。

使用 expect 匹配器

例如，我们可以使用 toEqual 匹配器来检查两个对象是否相等：

test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

我们也可以使用 toMatch 匹配器来检查一个字符串是否满足某种模式：

test('string match', () => {
  const message = 'hello, world!';
  expect(message).toMatch(/hello/);
  expect(message).not.toMatch(/goodbye/);
});

使用 Mock

Jest 提供了强大的 Mock 功能，可以使得测试更加稳定。Mock 可以让我们在测试代码中 Mock 掉依赖的模块，使得测试不会受到外部资源的影响。下面是一个简单的例子。

我们有一个名为 fetchData 的函数，它用来从远程服务器上拉取数据：

async function fetchData(url) {
  const response = await fetch(url);
  return await response.json();
}

我们如果想要测试这个函数，就必须保证在测试执行过程中，网络连接是畅通的。这是不可靠的。因此，我们可以使用 Jest 的 Mock 功能，将 fetchData 函数 Mock 掉：

import { fetchData } from './fetchData';

test('fetchData returns correct result', async () => {
  fetchData.mockResolvedValue({data: 'hello, world!'});
  const result = await fetchData('https://example.com/api');
  expect(result.data).toEqual('hello, world!');
});

在该测试中，我们首先 Mock 掉了 fetchData 函数，使得它总是返回 {data: 'hello, world!'}。然后，我们调用 fetchData 函数，并断言其返回的结果是否正确。在该测试中，我们使用了 Async/Await 来处理异步请求。

总结

Jest 是一个非常流行的 JavaScript 测试框架，它具有简单易用、速度快、强大的 Mock 功能等特点。本文介绍了 Jest 的基础用法，包括安装 Jest、编写简单的测试、使用 expect 匹配器和 Mock。通过本文的介绍，希望读者能够快速上手 Jest，并能在实际项目中使用 Jest 来写出高质量的测试代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652b8e3b7d4982a6ebd614f8