Jest 测试框架构建可靠的测试体系什么是 JestJest 是 Facebook 开发的 JavaScript 测试框架具有简洁的 API 和强大的功能。Jest 的特点特性说明零配置开箱即用快照测试自动生成和比对快照代码覆盖率内置覆盖率报告Mock 功能强大的 mocking 能力基础测试// 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); });匹配器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); });异步测试// 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 函数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 模块// __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); });快照测试test(快照测试, () { const component renderer.create(Button /).toJSON(); expect(component).toMatchSnapshot(); });测试配置// 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 } } };测试钩子beforeAll(() { console.log(所有测试开始前); }); beforeEach(() { console.log(每个测试开始前); }); afterEach(() { console.log(每个测试结束后); }); afterAll(() { console.log(所有测试结束后); });代码覆盖率# 生成覆盖率报告 npx jest --coverage # 查看覆盖率报告 open coverage/lcov-report/index.html实战案例// 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 等框架无缝集成社区活跃大量插件和资源编写高质量的测试让你的代码更加可靠。
