JavaScript 中怎么在单元测试中使用钩子函数初始化环境-js教程-PHP中文网

javascript单元测试中钩子函数（beforeeach、beforeall、aftereach、afterall）用于初始化和清理环境，确保测试隔离与可维护性；beforeeach为每个测试创建独立上下文，beforeall执行一次性全局准备，aftereach/afterall须成对清理资源防污染。

javascript 中怎么在单元测试中使用钩子函数初始化环境

在 JavaScript 单元测试中，钩子函数（如 beforeEach、beforeAll、afterEach、afterAll）是初始化和清理测试环境的核心机制。它们由主流测试框架（如 Jest、Vitest、Jasmine）提供，用于避免重复代码、确保测试隔离性，并统一管理依赖、状态或副作用。

使用 `beforeEach` 初始化每个测试前的独立环境

这是最常用的钩子，适合为每个测试用例创建干净、互不干扰的上下文，比如重置 mock、新建实例、清空 DOM 或设置初始状态。

Jest/Vitest 中直接在测试文件顶层调用：

beforeEach(() => {
  jest.clearAllMocks(); // 清除所有 mock 调用记录
  myService = new MyService(); // 创建新实例
  document.body.innerHTML = ''; // 清空测试 DOM
});

注意：不要在 beforeEach 中做耗时或异步初始化（如真实 API 请求），除非显式返回 Promise 或使用 async/await，且测试运行器支持（Jest/Vitest 均支持）。

用 `beforeAll` 执行一次性的全局准备操作

适用于开销较大、无需重复执行的初始化，例如启动模拟服务器、加载大型测试数据、配置全局 mock 实现等。

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

示例（Vitest + MSW）：

beforeAll(() => {
  server.listen(); // 启动 Mock Service Worker
});
afterAll(() => {
  server.close(); // 测试结束后关闭
});

⚠️ 避免在此处修改会被多个测试共享的可变状态（如全局变量、单例对象），否则易引发测试污染。

配合 `afterEach` 和 `afterAll` 及时清理资源

初始化和清理必须成对出现。未清理的定时器、事件监听器、mock 替换或 DOM 元素会导致内存泄漏或后续测试失败。

常见清理动作：
• jest.restoreAllMocks() 恢复被 jest.mock() 或 jest.spyOn() 替换的原始方法
• cleanup()（React Testing Library）卸载已渲染组件
• 移除手动添加的 addEventListener
• 清空 localStorage 或 sessionStorage
推荐将清理逻辑放在 afterEach 中，确保每个测试后环境“归零”。

在测试套件中组织钩子，提升可维护性

大型模块可将相关初始化逻辑封装为自定义 setup 函数，在钩子里调用，避免重复样板代码。

例如：

const setupTestEnv = () => {
  const store = configureStore({ reducer: rootReducer });
  const apiMock = new ApiMock();
  return { store, apiMock };
};

beforeEach(() => {
  const { store, apiMock } = setupTestEnv();
  // 将其挂载到 this 或通过变量传入测试用例
});