Jest 测试框架入门指南：从零开始编写你的第一个测试

Jest 测试框架入门指南：从零开始编写你的第一个测试

jest Delightful JavaScript Testing. 项目地址: https://gitcode.com/gh_mirrors/je/jest

什么是 Jest？

Jest 是一个由 Facebook 开发的 JavaScript 测试框架，专注于简洁性、易用性和高性能。它特别适合 React 应用程序的测试，但也可以用于测试任何 JavaScript 代码。Jest 提供了丰富的功能，包括测试运行器、断言库、模拟功能、快照测试等，所有这些都集成在一个包中。

安装 Jest

要开始使用 Jest，首先需要在项目中安装它。可以使用 npm 或 yarn 等包管理工具进行安装：

npm install --save-dev jest

这个命令会将 Jest 安装为开发依赖项，意味着它不会包含在生产环境的代码中。

编写第一个测试

让我们从一个简单的例子开始。假设我们有一个求和函数，我们想测试它是否正确工作。

1. 创建被测试的函数

首先，创建一个 sum.js 文件，包含我们要测试的函数：

function sum(a, b) {
  return a + b;
}
module.exports = sum;

2. 创建测试文件

接下来，创建一个名为 sum.test.js 的测试文件。Jest 会自动查找项目中以 .test.js 或 .spec.js 结尾的文件作为测试文件。

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

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

在这个测试中：

• test 是 Jest 提供的全局函数，用于定义一个测试用例
• expect 是 Jest 的断言函数，用于验证结果是否符合预期
• toBe 是一个匹配器，用于检查严格相等

3. 配置 package.json

为了更方便地运行测试，可以在 package.json 中添加一个测试脚本：

{
  "scripts": {
    "test": "jest"
  }
}

4. 运行测试

现在可以运行测试了：

npm test

如果一切正常，你会看到类似这样的输出：

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

恭喜！你已经成功编写并运行了第一个 Jest 测试！

命令行运行 Jest

除了通过 npm 脚本运行测试外，你也可以直接从命令行运行 Jest：

jest my-test --notify --config=config.json

这个命令会：

• 运行名称匹配 my-test 的测试文件
• 使用 config.json 作为配置文件
• 在测试完成后显示系统通知

高级配置

生成基础配置文件

Jest 可以生成一个基本的配置文件：

jest --init

这个命令会询问你一些问题，然后创建一个包含简要说明的配置文件。

使用 Babel

如果你的项目使用 ES6+ 特性，可以配置 Jest 使用 Babel 进行转译：

1. 安装必要的依赖：

npm install --save-dev babel-jest @babel/core @babel/preset-env

2. 创建 babel.config.js 文件：

module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

使用 TypeScript

Jest 可以通过两种方式支持 TypeScript：

1. 通过 Babel

安装 @babel/preset-typescript：

npm install --save-dev @babel/preset-typescript

然后更新 babel.config.js：

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

2. 通过 ts-jest

ts-jest 是一个专门为 Jest 设计的 TypeScript 预处理器：

npm install --save-dev ts-jest

类型定义

要为 Jest 的全局 API 添加 TypeScript 类型支持，有两种方法：

1. 使用 @jest/globals：

npm install --save-dev @jest/globals

然后在测试文件中：

import {describe, expect, test} from '@jest/globals';
import {sum} from './sum';

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

2. 使用 @types/jest：

npm install --save-dev @types/jest

这种方法不需要导入，直接提供全局类型。

与 ESLint 集成

要在 ESLint 中支持 Jest 的全局变量，可以配置 ESLint 环境：

{
  "overrides": [
    {
      "files": ["tests/**/*"],
      "env": {
        "jest": true
      }
    }
  ]
}

或者使用 eslint-plugin-jest：

npm install --save-dev eslint-plugin-jest

然后在 ESLint 配置中：

{
  "overrides": [
    {
      "files": ["tests/**/*"],
      "plugins": ["jest"],
      "env": {
        "jest/globals": true
      }
    }
  ]
}

总结

通过本文，你已经学会了：

1. 如何安装和配置 Jest
2. 如何编写基本的测试用例
3. 如何运行测试
4. 如何与 Babel、TypeScript 和 ESLint 集成

Jest 是一个功能强大但易于上手的测试框架，适合各种规模的 JavaScript 项目。随着项目的增长，你可以探索 Jest 更高级的功能，如模拟函数、快照测试、覆盖率报告等，来构建更全面的测试套件。

jest Delightful JavaScript Testing. 项目地址: https://gitcode.com/gh_mirrors/je/jest