Vitest+React Testing Library：测试间组件意外渲染问题排查

这个问题的核心是测试之间的路由状态没有被重置——cleanup只会清理DOM节点，但BrowserRouter的history实例在测试间是共享的，第一个测试跳转到Catalog路由后，第二个测试启动时路由还停留在Catalog页面，自然找不到Home组件里的Register链接。

给你几个可行的解决办法：

1. 每个测试使用独立的Router实例 #

不要在测试文件外层全局包裹BrowserRouter，而是在每个测试用例里单独渲染带Router的组件，这样每个测试都会拥有全新的history对象，不会互相干扰：

import { render, screen, fireEvent } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

test('跳转至Catalog页面', async () => {
  render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );

  fireEvent.click(screen.getByText('Check the catalog'));
  await screen.findByText('Catalog Content');
});

test('跳转至Register页面', async () => {
  render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );

  fireEvent.click(screen.getByText('Register'));
  await screen.findByText('Register Form');
});

2. 手动重置路由状态（适合全局Router场景） #

如果你的测试是在全局setup里统一包裹了Router，可以在beforeEach里手动将路由重置回根路径：

方式一：使用MemoryHistory控制路由 #

import { render, screen, fireEvent } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import App from './App';

beforeEach(() => {
  // 创建新的memory history实例并跳转至首页
  const history = createMemoryHistory();
  history.push('/');
  
  render(
    <Router history={history}>
      <App />
    </Router>
  );
});

test('跳转至Catalog页面', async () => {
  fireEvent.click(screen.getByText('Check the catalog'));
  await screen.findByText('Catalog Content');
});

test('跳转至Register页面', async () => {
  fireEvent.click(screen.getByText('Register'));
  await screen.findByText('Register Form');
});

方式二：通过useHistory钩子重置路由 #

import { render, screen, fireEvent, renderHook } from '@testing-library/react';
import { useHistory } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

beforeEach(() => {
  render(<BrowserRouter><App /></BrowserRouter>);
  
  // 获取history实例并跳转回首页
  const { result } = renderHook(() => useHistory(), { wrapper: BrowserRouter });
  result.current.push('/');
});

额外注意 #

• React Testing Library在Vitest中默认会自动执行cleanup，不需要手动调用await cleanup()，手动调用反而可能导致不必要的问题。
• 如果你的应用还有其他全局状态（比如Redux、Zustand），也要确保在beforeEach里重置状态，避免测试间的状态污染。

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