Jest 测试框架：构建可靠的测试体系

什么是 Jest？

Jest 是 Facebook 开发的 JavaScript 测试框架，具有简洁的 API 和强大的功能。

Jest 的特点

特性	说明
零配置	开箱即用
快照测试	自动生成和比对快照
代码覆盖率	内置覆盖率报告
Mock 功能	强大的 mocking 能力

基础测试

javascript 复制代码

// 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);
});

匹配器

javascript 复制代码

test('常见匹配器', () => {
  // 相等性
  expect(2 + 2).toBe(4);
  expect({ name: 'John' }).toEqual({ name: 'John' });
  
  // 真值
  expect(null).toBeNull();
  expect(undefined).toBeUndefined();
  expect(1).toBeTruthy();
  
  // 数字
  expect(2).toBeGreaterThan(1);
  expect(1).toBeLessThan(2);
  
  // 字符串
  expect('hello').toMatch(/ello/);
  
  // 数组
  expect([1, 2, 3]).toContain(2);
});

异步测试

javascript 复制代码

// Promise
test('异步测试 - Promise', () => {
  expect.assertions(1);
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
});

// Async/Await
test('异步测试 - Async/Await', async () => {
  expect.assertions(1);
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

Mock 函数

javascript 复制代码

const mockFn = jest.fn();

mockFn('hello');
expect(mockFn).toHaveBeenCalled();
expect(mockFn).toHaveBeenCalledWith('hello');

// Mock 返回值
const mockReturn = jest.fn().mockReturnValue('mocked value');
expect(mockReturn()).toBe('mocked value');

Mock 模块

javascript 复制代码

// __mocks__/axios.js
module.exports = {
  get: jest.fn().mockResolvedValue({ data: 'mocked data' })
};

// api.test.js
jest.mock('axios');
const axios = require('axios');

test('mock 模块', async () => {
  await fetchData();
  expect(axios.get).toHaveBeenCalledWith('/api/data');
});

快照测试

javascript 复制代码

test('快照测试', () => {
  const component = renderer.create(<Button />).toJSON();
  expect(component).toMatchSnapshot();
});

测试配置

javascript 复制代码

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js'
  },
  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80
    }
  }
};

测试钩子

javascript 复制代码

beforeAll(() => {
  console.log('所有测试开始前');
});

beforeEach(() => {
  console.log('每个测试开始前');
});

afterEach(() => {
  console.log('每个测试结束后');
});

afterAll(() => {
  console.log('所有测试结束后');
});

代码覆盖率

bash 复制代码

# 生成覆盖率报告
npx jest --coverage

# 查看覆盖率报告
open coverage/lcov-report/index.html

实战案例

javascript 复制代码

// userService.test.js
const UserService = require('./userService');

describe('UserService', () => {
  let service;
  
  beforeEach(() => {
    service = new UserService();
  });
  
  describe('getUser', () => {
    it('应该返回用户信息', async () => {
      const user = await service.getUser(1);
      expect(user.id).toBe(1);
      expect(user.name).toBe('John');
    });
    
    it('应该抛出错误当用户不存在', async () => {
      await expect(service.getUser(999)).rejects.toThrow('User not found');
    });
  });
});

总结

Jest 是一个功能强大的测试框架：

易于使用：简洁的 API
功能丰富：快照、mock、覆盖率
生态完善：与 React、Vue 等框架无缝集成
社区活跃：大量插件和资源

编写高质量的测试，让你的代码更加可靠。