React单元测试：beforeEach复用变量最佳实践及报错排查

我来帮你解决这个测试变量复用的问题！你遇到的ReferenceError本质是作用域问题——beforeEach里用let声明的变量是该函数的局部变量，外面的it测试块根本访问不到。而重复定义变量又太冗余，咱们来一步步优化：

核心问题分析 #

你之前的代码里，input、button这些变量被限制在beforeEach的局部作用域内，测试用例（it块）无法读取它们，所以报错。另外，不在beforeEach里重新渲染组件的话，容易出现测试状态污染，导致screen.getByText找不到元素的问题——因为上一个测试可能修改了组件状态，影响了下一个测试的初始环境。

最佳解决方案：提升变量到describe作用域 #

把需要复用的变量声明在describe块的顶部，然后在beforeEach里赋值。这样既保证了每个测试用例都能访问到变量，又能让beforeEach在每次测试前重新初始化组件和变量，确保测试隔离（每个测试都是干净的初始状态）。

修改后的代码如下：

import { render, fireEvent, wait, cleanup, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
describe('testing subscription form validation', () => {
  // 把变量声明提升到describe作用域
  let handleChange;
  let input;
  let button;

  beforeEach(() => {
    // 每次测试前重新初始化
    handleChange = jest.fn();
    const { getByTestId } = render(<Form handleChange={handleChange}/>);
    input = getByTestId('test-input');
    button = screen.getByTestId('test-button');
  });

  it('should display button text when valid input is entered', async () => {
    fireEvent.change(input, { target: { value: 'test value' } });
    fireEvent.click(button);
    expect(screen.getByText('[button text]')).toBeInTheDocument();
    await wait(() => expect(input).toHaveAttribute('value', 'test value'));
  });

  it('should show required error when input is empty', async () => {
    fireEvent.change(input, { target: { value: '' } });
    fireEvent.click(button);
    await wait(() => {
      const requiredText = screen.getByText('This field is required');
      expect(requiredText).toBeInTheDocument();
    });
  });
});

进阶优化：用对象组织测试变量 #

如果需要复用的变量比较多，可以把它们放到一个对象里，让代码更整洁：

describe('testing subscription form validation', () => {
  let testContext;

  beforeEach(() => {
    const handleChange = jest.fn();
    const { getByTestId } = render(<Form handleChange={handleChange}/>);
    // 用对象统一管理测试所需的变量和工具
    testContext = {
      handleChange,
      input: getByTestId('test-input'),
      button: screen.getByTestId('test-button'),
    };
  });

  it('should display button text when valid input is entered', async () => {
    fireEvent.change(testContext.input, { target: { value: 'test value' } });
    fireEvent.click(testContext.button);
    // ... 断言逻辑
  });
});

关键注意事项 #

1. 测试隔离优先：永远在beforeEach里重新初始化组件和变量，避免测试之间互相影响——这是单元测试的核心原则之一。
2. 避免全局变量：不要把测试变量放到全局作用域，describe块级作用域已经足够，既能复用又不会污染全局环境。
3. 按需使用wait：React Testing Library推荐用waitFor替代旧的wait（如果你的版本支持的话），它的API更直观：await waitFor(() => expect(...))。

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