告别盲测：Jest--JavaScript测试之道为什么要测试，测试什么？为什么要测试？提升代码质量和可靠性：尽早

为什么要测试，测试什么？

为什么要测试？

提升代码质量和可靠性： 尽早发现并修复bug，减少线上事故。
增强重构信心： 有测试用例保驾护航，你可以大胆地优化和重构代码，因为你知道它们会立即发现潜在的回归错误。
提高开发效率： 避免了手动重复测试的繁琐，让你可以更快地迭代新功能。

测试什么？

我们通常将测试分为几个层次：

单元测试 (Unit Tests)： 针对代码中最小的可独立测试单元进行测试，如单个函数、类的方法。它们应该快速、独立、可重复。这是JTest的基础和核心。
集成测试 (Integration Tests)： 测试多个单元或模块协同工作时的行为，验证它们之间的接口和交互是否正确。例如，测试一个UI组件与数据层API的交互。

JTest初体验——告别盲测的第一步 (Jest入门)

环境搭建

首先，我们来安装Jest。这是一个零配置的测试框架，非常适合快速上手。

# 进入你的项目目录
cd your-js-project

# 安装 Jest
npm install --save-dev jest

然后，在 package.json 中添加一个 test 脚本：

{
  "name": "your-js-project",
  "version": "1.0.0",
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "jest": "^30.0.3"
  }
}

2.2 你的第一个JTest用例

让我们从一个最简单的纯函数开始：加法。

src/sum.js

// 这是一个简单的加法函数
function sum(a, b) {
  return a + b;
}

module.exports = sum; // 导出函数

接下来，我们为 sum.js 创建一个测试文件。根据Jest的约定，测试文件通常与源文件放在同一目录下，并以 .test.js 或 .spec.js 结尾。

src/sum.test.js

const sum = require('./sum'); // 导入要测试的函数

// describe 块用于组织相关的测试用例
describe('sum 函数', () => {
    // test (或 it) 定义一个具体的测试用例
    test('应该正确计算两个正数的和', () => {
        // expect(value) 是 Jest 的全局函数，用于声明一个断言
        // .toBe(expected) 是一个匹配器 (matcher)，用于比较值是否相等
        expect(sum(1, 2)).toBe(3);
    });

    test('应该正确计算一个正数和一个负数的和', () => {
        expect(sum(5, -3)).toBe(2);
    });

    test('应该正确计算两个零的和', () => {
        expect(sum(0, 0)).toBe(0);
    });
});

2.3 运行测试

现在，打开你的终端，运行测试命令：

npm test

你将看到类似以下的输出：

> jest

 PASS  ./sum.test.js
  sum 函数
    √ 应该正确计算两个正数的和 (2 ms)
    √ 应该正确计算一个正数和一个负数的和
    √ 应该正确计算两个零的和

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        0.387 s, estimated 1 s
Ran all test suites.

恭喜你！你已经成功编写并运行了你的第一个JTest用例。PASS 意味着你的代码通过了测试，一切正常。

深入浅出：JTest核心断言与组织

更多的断言匹配器 (Matchers)

Jest提供了丰富的匹配器，用于检查各种条件。

匹配器	描述	示例
`toBe(value)`	严格相等 (===)，用于基本类型	`expect(1).toBe(1);`
`toEqual(value)`	递归比较对象或数组的内容相等，用于引用类型	`expect({a:1}).toEqual({a:1});`
`not.toBe(value)`	不严格相等	`expect(1).not.toBe(2);`
`toBeTruthy()`	检查是否为真值 (truthy)	`expect(1).toBeTruthy();`
`toBeFalsy()`	检查是否为假值 (falsy)	`expect(0).toBeFalsy();`
`toBeNull()`	检查是否为null	`expect(null).toBeNull();`
`toBeUndefined()`	检查是否为undefined	`expect(undefined).toBeUndefined();`
`toBeDefined()`	检查是否已定义	`expect(1).toBeDefined();`
`toBeInstanceOf(Class)`	检查是否是某个类的实例	`expect(new Array()).toBeInstanceOf(Array);`
`toContain(item)`	检查数组中是否包含某个元素	`expect([1, 2, 3]).toContain(2);`
`toMatch(regexp)`	检查字符串是否匹配正则表达式	`expect('hello').toMatch(/ll/);`
`toThrow(error?)`	检查函数是否抛出错误	`expect(() => { throw new Error(); }).toThrow();`
`resolves.toBe(value)`	检查Promise是否成功解决并匹配值	`await expect(Promise.resolve(1)).resolves.toBe(1);`
`rejects.toThrow(error?)`	检查Promise是否失败并抛出错误	`await expect(Promise.reject('error')).rejects.toThrow('error');`

示例：src/stringUtils.js

function capitalize(str) {
  if (typeof str !== 'string' || str.length === 0) {
    throw new Error('Input must be a non-empty string.');
  }
  return str.charAt(0).toUpperCase() + str.slice(1);
}

module.exports = { capitalize };

src/stringUtils.test.js

const { capitalize } = require('./stringUtils');

describe('capitalize 函数', () => {
    test('应该将字符串的第一个字母大写', () => {
        expect(capitalize('hello')).toBe('Hello');
    });

    test('应该返回相同的大写字符串，如果第一个字母已经是大写', () => {
        expect(capitalize('World')).toBe('World');
    });

    test('应该处理单字符字符串', () => {
        expect(capitalize('a')).toBe('A');
    });

    test('应该抛出错误，如果输入不是字符串', () => {
        expect(() => capitalize(123)).toThrow('Input must be a non-empty string.');
        expect(() => capitalize(null)).toThrow('Input must be a non-empty string.');
    });

    test('应该抛出错误，如果输入是空字符串', () => {
        expect(() => capitalize('')).toThrow('Input must be a non-empty string.');
    });
});

测试生命周期函数：`beforeEach` 与 `afterEach`

在某些场景下，你可能需要在每个测试用例运行之前或之后执行一些设置或清理工作。Jest提供了 beforeEach, afterEach, beforeAll, afterAll 等生命周期函数。

beforeEach(fn): 在每个 test (或 it) 运行之前执行。
afterEach(fn): 在每个 test (或 it) 运行之后执行。
beforeAll(fn): 在当前 describe 块中的所有 test 运行之前执行一次。
afterAll(fn): 在当前 describe 块中的所有 test 运行之后执行一次。

示例：计数器模块的测试

src/counter.js

let count = 0;

function increment() {
    count++;
}

function decrement() {
    count--;
}

function getCount() {
    return count;
}

function reset() {
    count = 0;
}

module.exports = {
    increment,
    decrement,
    getCount,
    reset
};

src/counter.test.js

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

describe('计数器模块', () => {
    // 在每个测试用例运行前，将计数器重置为0，确保每个测试的独立性
    beforeEach(() => {
        counter.reset();
    });

    test('increment 应该使计数器加一', () => {
        counter.increment();
        expect(counter.getCount()).toBe(1);
    });

    test('decrement 应该使计数器减一', () => {
        counter.decrement();
        expect(counter.getCount()).toBe(-1);
    });

    test('连续调用 increment 应该正确累加', () => {
        counter.increment();
        counter.increment();
        expect(counter.getCount()).toBe(2);
    });

    test('reset 应该将计数器重置为0', () => {
        counter.increment();
        counter.increment();
        counter.reset();
        expect(counter.getCount()).toBe(0);
    });
});

测试覆盖率

衡量你的测试质量的一个重要指标是测试覆盖率 (Test Coverage) 。Jest内置了此功能。

在 package.json 的 test 脚本中添加 --coverage 标志：

{
  "scripts": {
    "test": "jest --coverage"
  }
}

运行 npm test 后，你会在终端看到一个报告，也会在项目根目录生成一个 coverage 文件夹，其中包含详细的HTML报告，你可以打开 coverage/lcov-report/index.html 查看。

覆盖率指标：

Statements (语句): 代码中的语句有多少被执行了。
Branches (分支): if/else, switch, 三元表达式等分支有多少被执行了。
Functions (函数): 函数有多少被调用了。
Lines (行): 代码行有多少被执行了。

注意： 100% 覆盖率不代表代码没有bug，它只能说明你的测试执行了所有代码路径，但无法保证这些路径的逻辑都是正确的。你应该追求有意义的覆盖率，而不是盲目追求数字。

结语

如果你喜欢本教程，记得点赞+收藏！关注我获取更多JavaScript开发干货。

告别盲测：Jest--JavaScript测试之道