如何使用React Testing Library测试基于Redux触发的全局Snackbar/Toast

React Testing Library 完全可以实现这个需求，你只需要让测试环境的渲染逻辑和真实运行环境对齐即可。你当前测试只渲染了<SelectMedia />组件，全局的Snackbar和Redux Provider都不在测试渲染树中，自然无法捕获对应的弹出行为。

方案1：模拟真实运行环境（推荐，更贴近用户实际使用场景） #

步骤1：封装自定义测试渲染工具 #

在测试目录下新建公共工具文件（比如test-utils.js），把项目根层的Redux Provider、Snackbar组件都封装到渲染 wrapper 中，保证测试环境和生产环境一致：

import { render } from '@testing-library/react'
import { Provider } from 'react-redux'
import configureStore from '你的项目redux store配置路径'
import StyledSnackBar from '你的Snackbar组件路径'

const renderWithProviders = (ui, { preloadedState = {}, store = configureStore(preloadedState), ...renderOptions } = {}) => {
  const Wrapper = ({ children }) => {
    return (
      <Provider store={store}>
        <StyledSnackBar />
        {children}
      </Provider>
    )
  }
  return render(ui, { wrapper: Wrapper, ...renderOptions })
}

// 统一导出RTL的所有方法，后续测试直接从该文件引入即可
export * from '@testing-library/react'
export { renderWithProviders }

步骤2：修改测试用例 #

把原来的render方法替换为自定义的renderWithProviders，结合异步查询断言Snackbar内容即可，注意MUI的Snackbar有入场动画，需要用异步查询方法：

import { renderWithProviders, screen } from './test-utils'
import user from "@testing-library/user-event";
import SelectMedia from './SelectMedia'

describe("if the url is invalid", () => {
  beforeEach(async () => {
    renderWithProviders(<SelectMedia />);
    await user.click(screen.getByRole("button", { name: /search/i }));
  });

  test("the VideoPlayer does not activate", () => {
    // 补充你原有逻辑的断言即可
    expect(screen.queryByTestId('video-player')).not.toBeInTheDocument()
  });

  test("a warning toast message appears", async () => {
    // 替换为你实际的提示文案
    const warningToast = await screen.findByText('您输入的URL不合法，请检查后重试')
    expect(warningToast).toBeInTheDocument()
    // 可选：验证提示的类型、样式等
    expect(warningToast.closest('[role="alert"]')).toHaveClass('MuiAlert-warning')
  });
});

方案2：仅验证Redux Action派发（执行速度更快，适合单元测试） #

如果不需要验证Snackbar的实际渲染效果，只需要确认组件触发了正确的事件，可以直接mock Redux的dispatch方法，断言对应Action是否被派发即可：

import { render, screen } from '@testing-library/react'
import user from "@testing-library/user-event";
import { Provider } from 'react-redux'
import SelectMedia from './SelectMedia'

test("dispatches warning alert action when url is invalid", async () => {
  const mockDispatch = jest.fn()
  const mockStore = {
    getState: () => ({}),
    subscribe: () => {},
    dispatch: mockDispatch
  }

  render(
    <Provider store={mockStore}>
      <SelectMedia />
    </Provider>
  )

  await user.click(screen.getByRole("button", { name: /search/i }))
  // 替换为你项目中实际更新alert的Action结构
  expect(mockDispatch).toHaveBeenCalledWith({
    type: 'alert/showWarning',
    payload: '您输入的URL不合法，请检查后重试'
  })
})

你可以根据测试的覆盖需求选择对应方案，两种方案都在React Testing Library的能力范围内，不需要额外引入其他工具。

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