如何使用React Testing Library测试MUI Snackbar的autoHideDuration

我正在为Material-UI（MUI）的Snackbar组件编写单元测试，需要验证当设置autoHideDuration为6000ms时，组件会在6秒后自动关闭，使用的测试工具是React Testing Library。

我的Snackbar组件代码 #

<Snackbar
  open={open}
  autoHideDuration={6000}
  onClose={handleClose}
  message="Note archived"
  action={action}
/>

我尝试的测试用例（未达到预期效果） #

it(" Should close after 6sec", async () => {
        const { queryByText } = screen;

         render( <Snackbar
          open
          message="Snackbar component!!!"
          onClose={onClose}
          testId="test-snackbar"
        />
       )

        const message = queryByText(" Snackbar component!");
        expect(message).not.toBeInTheDocument();
      });

问题分析与正确测试方案 #

你的测试用例存在几个关键问题：

• 未给Snackbar设置autoHideDuration属性，组件不会触发自动关闭逻辑
• 断言逻辑错误：初始状态下组件是打开的，应该先确认它存在，再等待关闭后断言不存在
• 文本匹配不精准：组件内文本是"Snackbar component!!!"，但查询的是" Snackbar component!"（多了开头空格且少一个感叹号）

推荐的测试实现（使用假计时器加速测试） #

import { render, screen, waitFor } from '@testing-library/react';
import Snackbar from '@mui/material/Snackbar';

it('should automatically close after 6 seconds', async () => {
  // 模拟假计时器，避免真实等待6秒
  jest.useFakeTimers();
  const mockOnClose = jest.fn();

  render(
    <Snackbar
      open
      autoHideDuration={6000}
      onClose={mockOnClose}
      message="Snackbar component!!!"
      testId="test-snackbar"
    />
  );

  // 初始状态：确认Snackbar存在
  expect(screen.getByText('Snackbar component!!!')).toBeInTheDocument();

  // 快进6秒时间
  jest.advanceTimersByTime(6000);

  // 等待组件更新，断言Snackbar已关闭
  await waitFor(() => {
    expect(screen.queryByText('Snackbar component!!!')).not.toBeInTheDocument();
    // 可选：验证onClose回调被调用
    expect(mockOnClose).toHaveBeenCalled();
  });

  // 清理假计时器
  jest.useRealTimers();
});

关键说明 #

• 使用jest.useFakeTimers()和jest.advanceTimersByTime()模拟时间流逝，大幅提升测试速度
• 先用getByText确认组件初始可见，再通过waitFor等待组件状态更新后断言不可见
• 引入mock回调mockOnClose，可以验证自动关闭逻辑是否正确触发了关闭回调

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