Jest 快速上手教程

Jest 快速上手教程

在 JavaScript 前端开发中，对代码进行测试是必不可少的。Jest 是 Facebook 出品的一款前端测试框架，它可以让我们方便快速地编写测试用例和进行测试，同时也可以提供完备的测试结果统计和持续集成支持。本文将为您介绍 Jest 的基本概念、用法以及实际项目应用。

一、快速入门

1. 安装 Jest

通过 npm 安装 Jest：

npm install --save-dev jest

1. 写一个简单的测试用例

在项目的某个目录下，新建一个 demo.test.js 文件，输入以下代码：

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

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

其中，expect 和 toBe 是 Jest 提供的测试断言库，我们来逐一解释：

• expect：表示我们要测试的实际结果；
• toBe：表示我们预期的结果。

比如上述例子中，我们测试 sum 函数的执行结果是否等于 3。

1. 执行测试

在项目根目录下，执行以下命令：

npx jest

如果控制台打印出以下信息，说明测试用例通过：

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

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total

二、进阶应用

1. 配置文件

Jest 默认会查找项目根目录下的 jest.config.js 配置文件，我们可以在该文件中设置 Jest 的相关配置。

举个例子，我们可以设置 Jest 只测试以 .spec.js 或 .test.js 后缀结尾的文件：

module.exports = {
  testMatch: [
    '**/__tests__/**/*.js?(x)',
    '**/?(*.)+(spec|test).js?(x)',
  ],
};

1. Mock 测试

在实际项目开发中，我们经常会遇到需要模拟数据和函数的场景，这时候就需要使用 Jest 提供的 Mock 测试功能。

以模拟函数为例，以下是一个 mock.js 文件：

module.exports = {
  get: jest.fn(() => Promise.resolve({ data: 'Hello World!' })),
};

在 Jest 中，我们可以直接使用 jest.fn() 创建一个 Mock 函数，并指定函数的执行结果。在测试用例中，我们可以通过调用 Mock 函数来模拟实际场景。

1. 快照测试

快照测试是一种常用的测试方式，它可以测试组件、页面等的渲染结果是否符合预期。Jest 提供了 Snapshot Testing 功能来支持该类型的测试。

举个例子，我们可以创建一个 snapshot.js 文件：

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

test('snapshot test', () => {
  expect(sum(1, 2)).toMatchSnapshot();
});

运行测试后，Jest 会为该测试用例创建一个快照文件（.snap 后缀），如果下次运行测试时，快照文件和当前渲染结果不同，Jest 将会提示我们进行调试或更新快照文件。

三、总结

Jest 是一个功能强大、易于上手的前端测试框架，我们可以通过本文介绍的 API 和例子快速上手 Jest，并在实际项目中应用它。希望本文能为您提供有帮助的指导和学习意义。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6490147c48841e9894e3dce4