Jest学习：新手入门指南

本文提供了关于Jest学习的全面指南，从Jest的基础介绍到安装配置，再到基础使用和常用API介绍，帮助新手快速上手。文章还详细讲解了Jest的高级特性，如代码覆盖率报告、并行测试以及如何进行前端环境的测试。此外，文中还分享了一些Jest调试技巧，进一步提升了测试效率。希望这篇指南能帮助你更好地掌握Jest学习。

Jest学习：新手入门指南 Jest简介

什么是Jest

Jest是一款由Facebook开发的JavaScript测试框架，主要用来测试JavaScript应用程序。Jest具有简单易用、快速且功能全面的特点。它不仅可以用于测试JavaScript代码，还可以用来测试React、Vue等前端框架的应用程序。

Jest的主要功能和优势

Jest的主要功能包括：

• 支持JavaScript和TypeScript
• 自动模拟Node.js模块
• 自动收集测试用例
• 支持断言、模拟和spy函数
• 提供快照测试功能
• 支持代码覆盖率报告
• 支持并行测试
• 支持延迟和模拟定时器

Jest的优势包括：

• 快速启动和运行
• 使用简洁的API，易于上手
• 内置模拟功能
• 自动收集测试文件
• 良好的错误报告和调试支持

Jest的安装和配置

首先，你需要安装Jest。如果你使用的是Node.js项目，可以通过npm或yarn来全局安装Jest：

npm install --save-dev jest
# 或者使用yarn
yarn add --dev jest

安装完成后，你还需要在项目中配置Jest。在项目的根目录下创建jest.config.js文件，并配置Jest的基本设置：

module.exports = {
    // 测试文件的匹配模式
    testMatch: [
        '**/?(*.)+(spec|test).[tj]s'
    ],
    // 指定代码覆盖率报告的输出目录
    coverageDirectory: './coverage',
    // 指定覆盖率报告的格式
    coverageReporters: ['text', 'lcov', 'clover'],
    // 是否对第三方库进行代码覆盖率统计
    collectCoverageFrom: [
        'src/**/*.{js,jsx,ts,tsx}',
        '!**/node_modules/**'
    ],
    // 是否使用缓存
    cacheDirectory: './node_modules/.cache/jest',
};

接下来，在项目的入口文件（通常是package.json）中添加test脚本，用于启动Jest：

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

现在你已经完成了Jest的基本安装和配置，可以开始编写测试用例了。

Jest基础使用

编写第一个测试用例

在Jest中，编写测试用例非常简单。首先，创建一个测试文件，例如add.spec.js，然后在这个文件中编写测试用例。假设你有一个简单的add函数，用于加两个数：

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

在测试文件add.spec.js中，你可以使用describe和it（或test）来组织和编写测试用例：

describe('Add Function', () => {
    it('should return the sum of two numbers', () => {
        const result = add(1, 2);
        expect(result).toBe(3);
    });
});

在这个示例中，describe用于描述测试用例的范围，it用于定义具体的测试用例。expect是Jest中的断言函数，用于验证结果是否符合条件。

测试函数

Jest可以轻松地测试各种类型的函数，包括纯函数、异步函数、高阶函数等。下面是一些具体的测试示例。

纯函数测试

假设你有一个纯函数multiply，用于乘两个数：

function multiply(a, b) {
    return a * b;
}

在测试文件中，你可以测试该函数：

describe('Multiply Function', () => {
    it('should return the product of two numbers', () => {
        const result = multiply(3, 4);
        expect(result).toBe(12);
    });
});

异步函数测试

假设你有一个异步函数asyncAdd，用于异步加两个数：

function asyncAdd(a, b) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(a + b);
        }, 1000);
    });
}

在测试文件中，你可以使用await来测试异步函数：

describe('Async Add Function', () => {
    it('should return the sum of two numbers after 1 second', async () => {
        const result = await asyncAdd(1, 2);
        expect(result).toBe(3);
    });
});

高阶函数测试

假设你有一个函数addAndLog，它接受一个函数作为参数，并在调用该函数后打印结果：

function addAndLog(a, b, logFn) {
    const result = a + b;
    logFn(result);
    return result;
}

在测试文件中，你可以测试该高阶函数：

describe('Add and Log Function', () => {
    it('should log the result of adding two numbers', () => {
        const logFn = jest.fn();
        const result = addAndLog(1, 2, logFn);
        expect(result).toBe(3);
        expect(logFn).toHaveBeenCalledWith(3);
    });
});

测试类和对象

Jest同样支持测试类和对象。假设你有一个Calculator类，包含加法和减法方法：

class Calculator {
    add(a, b) {
        return a + b;
    }

    subtract(a, b) {
        return a - b;
    }
}

在测试文件中，你可以创建Calculator的实例并对其进行测试：

const calculator = new Calculator();

describe('Calculator', () => {
    it('should add two numbers', () => {
        const result = calculator.add(1, 2);
        expect(result).toBe(3);
    });

    it('should subtract two numbers', () => {
        const result = calculator.subtract(5, 3);
        expect(result).toBe(2);
    });
});

通过这种方式，你可以测试类和对象中的各种方法。

Jest常用API介绍

expect函数的基本用法

expect是Jest中最常用的断言函数，用于验证测试结果是否符合预期。expect接受一个值作为参数，并返回一个匹配器对象，该对象提供了各种断言方法。

例如，你可以使用toBe断言两个值是否相等：

expect(1 + 2).toBe(3);

此外，Jest还提供了许多其他的断言方法，如toBeGreaterThan、toBeLessThan、toEqual等。

描述测试

describe函数用于组织测试用例，它接受一个字符串描述和一个函数作为参数。这个函数通常包含多个具体的it或test函数。beforeEach和afterEach函数可以在每个测试用例之前或之后执行。

下面是一个使用beforeEach和afterEach的示例：

let number = 0;

describe('Before and After Each', () => {
    beforeEach(() => {
        number = 0;
    });

    afterEach(() => {
        number = 0;
    });

    it('should increment the number', () => {
        number += 1;
        expect(number).toBe(1);
    });
});

断言方法

Jest提供了许多断言方法，以满足不同的测试需求。以下是一些常用的断言方法：

• toBe: 用来检测两个值是否严格相等。
• toEqual: 用来检测两个值是否相等，适用于复杂的数据结构。
• toBeGreaterThan 和 toBeLessThan: 用来检测值是否大于或小于某个值。
• toContain: 用来检测数组或字符串中是否包含某个值。
• toBeInstanceOf: 用来检测值是否是某个类的实例。

例如，以下示例展示了toEqual和toBeInstanceOf的用法：

it('should test complex values', () => {
    const obj = { a: 1, b: 2 };
    expect(obj).toEqual({ a: 1, b: 2 });

    class MyClass {}

    const instance = new MyClass();
    expect(instance).toBeInstanceOf(MyClass);
});

模拟函数和模块

Jest提供了jest.fn()来创建模拟函数，这可以用来模拟函数的行为或验证函数是否被正确调用。你还可以使用jest.mock来模拟模块。

下面是一个模拟函数的示例：

const add = jest.fn().mockImplementation((a, b) => a + b);

it('should call the mock function', () => {
    add(1, 2);
    expect(add).toHaveBeenCalledWith(1, 2);
});

下面是一个模拟模块的示例：

jest.mock('./my-module');

import { myFunction } from './my-module';

it('should mock my function', () => {
    myFunction.mockImplementation(() => 'mocked');
    expect(myFunction()).toBe('mocked');
});

Jest高级特性

代码覆盖率报告

代码覆盖率报告可以显示你的测试是否涵盖了所有代码，帮助你发现未测试的代码。要生成代码覆盖率报告，可以在Jest配置文件中启用代码覆盖率，并指定报告格式。

module.exports = {
    // 其他配置...
    coverageDirectory: './coverage',
    coverageReporters: ['text', 'lcov', 'clover'],
    collectCoverageFrom: [
        'src/**/*.{js,jsx,ts,tsx}',
        '!**/node_modules/**'
    ],
};

运行测试时，Jest会自动生成代码覆盖率报告，并将其输出到指定的目录中。例如，代码覆盖率报告会显示哪些文件和行已被测试覆盖，哪些未被覆盖。

并行测试

通过并行测试，你可以同时运行多个测试用例，从而提高测试效率。要启用并行测试，可以在Jest配置文件中设置maxWorkers选项。

module.exports = {
    // 其他配置...
    maxWorkers: '50%',
};

maxWorkers参数指定了并行执行测试的最大工作线程数量。50%表示使用一半的可用处理器核心数。

延迟和模拟定时器

当你需要测试异步代码时，模拟定时器可以帮助你更好地控制测试环境。Jest提供了jest.useFakeTimers和jest.runAllTimers等函数来模拟和运行定时器。

下面是一个模拟定时器的示例：

jest.useFakeTimers();

describe('Timer Test', () => {
    it('should run setTimeout after 1 second', () => {
        jest.setTimeout(2000); // 设置全局超时时间
        const mockFn = jest.fn();
        setTimeout(mockFn, 1000);

        jest.runAllTimers(); // 运行所有定时器
        expect(mockFn).toHaveBeenCalled();
    });
});

前端环境的测试

对于前端代码的测试，Jest可以模拟浏览器环境。你可以在测试文件中使用jest-environment-jsdom来模拟DOM环境。

// package.json
{
    "devDependencies": {
        "jest": "^27.0.6",
        "jest-environment-jsdom": "^27.0.6"
    }
}

在测试文件中，你可以访问DOM元素并进行测试：

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

describe('App Component', () => {
    it('should render a heading', () => {
        const { getByText } = render(<App />);
        const heading = getByText(/Hello World/i);
        expect(heading).toBeInTheDocument();
    });
});

Jest调试技巧

查看测试日志

测试日志可以帮助你了解测试的执行过程和结果。你可以通过在命令行中运行测试来查看测试日志：

npm test

或者使用Jest的详细日志模式：

jest --verbose

例如，使用jest --verbose命令，你可以在终端中看到每个测试用例的详细执行过程和结果。

使用Jest的调试模式

Jest提供了调试模式，可以在运行测试时暂停并进入调试器。你可以在测试文件中插入debugger语句，然后运行测试：

describe('Debug Test', () => {
    it('should halt at debugger', () => {
        debugger;
    });
});

运行测试时，Jest会在遇到debugger语句时暂停，并进入调试器。

结合VS Code调试测试用例

你可以使用VS Code调试器来调试Jest测试用例。首先，确保在VS Code中安装了Jest调试扩展。然后，在项目的根目录下创建.vscode文件夹，并在其中创建launch.json文件：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Jest Debug",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/jest",
            "runtimeArgs": [
                "--runInBand"
            ],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "skipFiles": [
                "<node_internals>/**/*.js"
            ]
        }
    ]
}

在VS Code中，你可以使用F5快捷键启动调试会话，或者点击左侧的调试按钮，并选择Jest Debug配置。调试时，可以设置断点并逐步执行测试代码，以查看代码的执行情况和结果。