前端测试框架 Jest 使用

为什么需要测试？

测试确保代码质量，防止 bug。Jest 是 Facebook 开发的测试框架，零配置，开箱即用。

安装

npm install --save-dev jest

在 package.json 中添加：

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

基本测试

创建 sum.js：

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

module.exports = sum;

创建 sum.test.js：

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

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

运行 npm test。

匹配器 (Matchers)

• toBe()：严格相等
• toEqual()：对象相等
• toBeTruthy()：真值
• toContain()：包含

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

测试异步代码

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('peanut butter'), 100);
  });
}

test('the data is peanut butter', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

设置和清理

beforeEach(() => {
  // 每个测试前运行
});

afterEach(() => {
  // 每个测试后运行
});

beforeAll(() => {
  // 所有测试前运行一次
});

afterAll(() => {
  // 所有测试后运行一次
});

Mock 函数

模拟依赖。

const mockCallback = jest.fn(x => 42 + x);
mockCallback(1);
expect(mockCallback).toHaveBeenCalledWith(1);

测试 React 组件

需要额外安装：

npm install --save-dev @testing-library/react @testing-library/jest-dom

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

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

配置

创建 jest.config.js：

module.exports = {
  testEnvironment: 'jsdom', // DOM 测试环境
  setupFilesAfterEnv: ['<rootDir>/setupTests.js']
};

总结

Jest 让测试变得简单。从单元测试开始，逐步覆盖更多场景。测试是代码质量的保障。