React项目中如何全局配置Jest的beforeEach与afterEach钩子并保留container变量访问权限

当然可以！重复编写beforeEach/afterEach确实很繁琐，我们可以借助Jest的全局配置能力，把这部分重复逻辑抽成全局钩子，同时还能让每个测试文件轻松访问到container变量。下面给你两种可行的方案：

方案一：通过全局变量共享container #

这种方法不需要在每个测试文件里导入任何东西，直接用全局变量就能访问container。

1. 创建全局测试初始化文件 #

在你的项目里新建一个测试配置文件，比如src/tests/setupTests.ts（JavaScript项目用.js即可），把初始化和清理逻辑放进去：

import { unmountComponentAtNode } from 'react-dom';

// TypeScript项目需要声明全局变量类型（JS项目可跳过）
declare global {
  var container: Element | null;
}

// 初始化全局container
global.container = null;

beforeEach(() => {
  global.container = document.createElement('div');
  document.body.appendChild(global.container);
});

afterEach(() => {
  if (global.container) {
    unmountComponentAtNode(global.container);
    global.container.remove();
    global.container = null;
  }
});

2. 让Jest加载这个全局配置 #

• 如果你用的是Create React App，它默认会自动识别并加载src/setupTests.ts，无需额外配置。
• 如果是自定义Jest配置，打开jest.config.js，添加setupFilesAfterEnv配置：

  module.exports = {
    // 其他配置项...
    setupFilesAfterEnv: ['./src/tests/setupTests.ts'],
  };
  

3. 修改测试文件 #

现在你可以删掉每个测试文件里重复的beforeEach/afterEach，直接使用全局的container：

import { screen } from '@testing-library/react';
import { render } from 'react-dom';
import Form from './Form';

test('renders with a heading', () => {
  render(
    <Form heading={'Form Heading'} />,
    global.container
  );
  const element = screen.getByText(/form heading/i);
  expect(element).toBeInTheDocument();
});

方案二：通过导出变量共享container #

如果你觉得全局变量不够清晰，也可以把container导出，在测试文件里按需导入：

1. 修改全局初始化文件 #

调整setupTests.ts，把container导出：

import { unmountComponentAtNode } from 'react-dom';

export let container: Element | null = null;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  if (container) {
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  }
});

2. 在测试文件里导入使用 #

import { screen } from '@testing-library/react';
import { render } from 'react-dom';
import Form from './Form';
import { container } from '../tests/setupTests'; // 导入全局container

test('renders with a heading', () => {
  render(
    <Form heading={'Form Heading'} />,
    container
  );
  const element = screen.getByText(/form heading/i);
  expect(element).toBeInTheDocument();
});

注意事项 #

• 两种方案都能满足需求，选择哪种取决于你团队的代码风格偏好。
• TypeScript项目要注意类型声明，避免出现类型报错；JavaScript项目可以忽略类型相关代码。
• 若测试时container始终为null，请检查Jest配置文件中setupFilesAfterEnv的路径是否正确。

内容的提问来源于stack exchange，提问作者Akash