React Testing Library测试相互干扰问题排查求助

核心问题根源 #

测试用例出现顺序依赖，本质是测试隔离性不足，主要涉及以下几点：

• Jest 模拟函数未在测试间重置，导致状态积累
• 异步断言使用 setTimeout 而非 React Testing Library 提供的 waitFor，无法确保断言在 DOM 更新后执行
• 若组件依赖全局状态（如 Redux/Context），未在测试间重置全局状态会导致状态泄漏

具体修复步骤 #

1. 重置模拟函数 #

在 describe 块内添加 beforeEach 钩子，确保每次测试前清空 updateFilters 模拟函数的调用记录：

describe('Filters', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  // 现有测试用例...
});

2. 替换 setTimeout 为 waitFor #

setTimeout 无法保证 Jest 等待断言执行，改用 waitFor 处理异步 DOM 更新：

// 修正后的「点击清除按钮移除筛选器」测试
test('clicking clear button removes filters', async () => {
  render(<Filters updateFilters={updateFilters} />);
  const clearButton = screen.getByRole('button', {
    name: `${t('clear')} ${t('filters')}`,
  });
  const input = screen.getAllByPlaceholderText<HTMLInputElement>(
    t('displayAll'),
  )[2];

  const dateInput = screen.getAllByPlaceholderText<HTMLInputElement>(
    t('displayAll'),
  )[0];

  await userEvent.type(dateInput, yesterday);
  await userEvent.type(input, 'test');
  await userEvent.click(clearButton);

  // 使用 waitFor 等待 DOM 更新完成
  await waitFor(() => {
    expect(input).toHaveValue('');
    expect(clearButton).toBeDisabled();
  });
});

注意：需确保导入 waitFor：

import { screen, waitFor } from '@testing-library/react';

3. 重置全局状态（若适用） #

如果组件依赖全局状态管理工具（如 Redux、Context API），需在 beforeEach 中重置状态，例如：

• Redux：创建新的测试 store 并包裹组件
• Context：重置 Context 的初始值或重新渲染 Provider

4. 验证异步操作的等待逻辑 #

确保所有用户交互和组件状态更新都被正确 await，避免测试提前结束导致断言失效。

修正后的完整测试代码（关键部分） #

import React from 'react';

import '@testing-library/jest-dom/extend-expect';

import { screen, waitFor } from '@testing-library/react'; // 新增 waitFor
import userEvent from '@testing-library/user-event';
import dayjs from 'dayjs';

import { render, t } from '/utils';

import { Filters } from './Filters';

const updateFilters = jest.fn();

const defaultEndDate = Date.now();
const defaultEndDateDayJS = dayjs(defaultEndDate);
const yesterday = defaultEndDateDayJS.subtract(1, 'day').toISOString();
const tomorrow = defaultEndDateDayJS.add(1, 'day').toISOString();

describe('Filters', () => {
  // 新增 beforeEach 重置模拟函数
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('validates date ranges and displays correct messages', async () => {
    // 原有代码不变...
  });

  describe('clear button', () => {
    test('clear button renders and is disabled by default', () => {
      // 原有代码不变...
    });

    test('clicking clear button removes filters', async () => {
      render(<Filters updateFilters={updateFilters} />);
      const clearButton = screen.getByRole('button', {
        name: `${t('clear')} ${t('filters')}`,
      });
      const input = screen.getAllByPlaceholderText<HTMLInputElement>(
        t('displayAll'),
      )[2];

      const dateInput = screen.getAllByPlaceholderText<HTMLInputElement>(
        t('displayAll'),
      )[0];

      await userEvent.type(dateInput, yesterday);
      await userEvent.type(input, 'test');
      await userEvent.click(clearButton);

      // 替换 setTimeout 为 waitFor
      await waitFor(() => {
        expect(input).toHaveValue('');
        expect(clearButton).toBeDisabled();
      });
    });
  });
});

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