JavaScript测试驱动_Jest单元测试框架详解-js教程-PHP中文网

JavaScript测试驱动_Jest单元测试框架详解

幻影之瞳

发布： 2025-11-22 22:49:14

原创

573人浏览过

Jest因零配置、内置断言、Mock支持、快照测试和并行执行等特性成为JavaScript测试首选，安装后通过npm test即可运行测试，其核心功能包括test/describe组织用例、expect匹配器断言、异步测试、模块Mock及快照比对，并支持生命周期钩子管理测试状态。

javascript测试驱动_jest单元测试框架详解

测试驱动开发（TDD）在现代 JavaScript 开发中扮演着关键角色，而 Jest 是目前最受欢迎的单元测试框架之一。它由 Facebook 维护，开箱即用、配置简单，支持异步测试、Mock、覆盖率报告等功能，广泛应用于 React 项目，也适用于 Node.js 和普通 JavaScript 应用。

为什么选择 Jest？

Jest 能快速上手，主要得益于以下几个特点：

零配置启动：安装后无需复杂配置即可运行测试。
内置断言库和测试工具：无需额外引入 Chai 或 Mocha 等工具。
支持快照测试：特别适合 UI 组件测试，能记录输出结构并比对变化。
优秀的 Mock 支持：可轻松模拟函数、模块、定时器等。
并行执行测试：提升大型项目测试速度。
代码覆盖率报告：通过命令行一键生成。

快速开始：安装与基本使用

初始化项目并安装 Jest：

npm init -y
npm install --save-dev jest

登录后复制

在 package.json 中添加测试脚本：

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

编写一个简单的函数进行测试：

// math.js
function add(a, b) {
  return a + b;
}
module.exports = { add };

登录后复制

创建对应的测试文件：

// math.test.js
const { add } = require('./math');

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

登录后复制

运行 npm test，Jest 会自动查找以 .test.js 或 .spec.js 结尾的文件并执行。

核心功能详解

Jest 提供了丰富的 API 来满足不同测试需求。

1. 测试组织：test、describe

使用 test() 定义单个测试用例，用 describe() 分组相关测试：

Hour One

AI文字到视频生成

查看详情

describe('Math operations', () => {
  test('addition works', () => {
    expect(add(1, 2)).toBe(3);
  });

  test('addition with negatives', () => {
    expect(add(-1, -1)).toBe(-2);
  });
});

登录后复制

2. 常用断言：expect 与匹配器

Jest 使用 expect 配合匹配器进行断言：

.toBe()：严格相等（===）
.toEqual()：深度比较对象或数组
.toBeDefined() / .toBeNull()
.toContain()：检查数组是否包含某元素
.toThrow()：验证函数是否抛出异常

3. 异步测试支持

测试 Promise 或 async/await 函数时，需返回 Promise 或使用 async：

// asyncFunc.js
function fetchData() {
  return Promise.resolve('data');
}

// asyncFunc.test.js
test('fetches data asynchronously', async () => {
  const data = await fetchData();
  expect(data).toBe('data');
});

登录后复制

4. Mock 函数与模块

Mock 可替代真实实现，控制行为并验证调用：

const mockFn = jest.fn(() => 'mocked value');

mockFn('input');
expect(mockFn).toHaveBeenCalledWith('input');
expect(mockFn()).toBe('mocked value');

登录后复制

模拟模块导入：

// utils.js
export const fetchUser = () => axios.get('/user');

// user.test.js
jest.mock('axios');
import axios from 'axios';
import { fetchUser } from './utils';

test('fetchUser calls axios.get', async () => {
  axios.get.mockResolvedValue({ data: 'fake user' });
  const user = await fetchUser();
  expect(axios.get).toHaveBeenCalledWith('/user');
});

登录后复制

5. 快照测试

用于检测输出是否意外改变：

test('renders correctly', () => {
  const component = renderComponent();
  expect(component).toMatchSnapshot();
});

登录后复制

首次运行生成快照文件，后续测试将比对结果。若变更合理，可通过交互命令更新快照。

测试生命周期与钩子函数

Jest 提供钩子函数管理测试前后的状态：

beforeEach()：每个测试前执行
afterEach()：每个测试后执行
beforeAll()：所有测试前执行一次
afterAll()：所有测试后执行一次

例如重置 Mock 状态：

beforeEach(() => {
  jest.clearAllMocks();
});

登录后复制

基本上就这些。Jest 的设计让测试变得直观高效，配合 ESLint、Babel、TypeScript 等生态也能无缝集成。掌握其核心功能后，就能为项目构建可靠的测试保障。

以上就是JavaScript测试驱动_Jest单元测试框架详解的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript_测试驱动开发与自动化测试测试实践：Jest单元测试与Mock技巧 JavaScript测试策略_单元测试与集成测试 JavaScript测试框架_Jest单元测试详解 JavaScript_RESTfulAPI最佳实践指南