测试组件对location变化的响应时useEffect未触发的问题排查

为什么当前测试不生效？ #

你用rerender重新渲染整个MemoryRouter的方式有问题——每次调用rerender都会创建一个全新的MemoryRouter实例，原来的<Component>会被卸载，然后在新的Router上下文里重新挂载。这不是“同一个组件实例下的location变化”，而是新组件的初始渲染，自然不会触发原组件的useEffect依赖更新。

不需要改用BrowserRouter #

测试环境下完全没必要用BrowserRouter，它依赖浏览器的window.history，反而不如MemoryRouter可控，后者完全基于内存，适合测试场景。

正确的测试方式 #

你需要在同一个MemoryRouter实例内修改路由，而不是重新创建Router。有两种常用方法：

方法1：直接操作MemoryRouter的history对象

import { createMemoryHistory, Router } from 'react-router-dom';

// 先mock useTracking
const mockTrackPageView = jest.fn();
jest.mock('./path-to-useTracking', () => () => ({
  trackPageView: mockTrackPageView
}));

test('trackPageView triggers on location change', () => {
  // 创建history实例并初始化路由
  const history = createMemoryHistory({ initialEntries: ['/'] });
  
  render(
    <Router history={history}>
      <Component />
    </Router>
  );

  // 验证初始加载时调用一次
  expect(mockTrackPageView).toHaveBeenCalledTimes(1);

  // 在同一个history实例内导航到新路由
  history.push('/new-location');

  // 验证location变化后再次调用
  expect(mockTrackPageView).toHaveBeenCalledTimes(2);
});

方法2：使用useNavigate钩子导航

import { MemoryRouter, useNavigate } from 'react-router-dom';
import { render, renderHook } from '@testing-library/react';

// 同样先mock useTracking
const mockTrackPageView = jest.fn();
jest.mock('./path-to-useTracking', () => () => ({
  trackPageView: mockTrackPageView
}));

test('trackPageView triggers on location change', () => {
  // 获取navigate函数
  const { result } = renderHook(() => useNavigate(), {
    wrapper: ({ children }) => <MemoryRouter initialEntries={['/']}>{children}</MemoryRouter>
  });
  const navigate = result.current;

  // 渲染组件
  render(
    <MemoryRouter initialEntries={['/']}>
      <Component />
    </MemoryRouter>
  );

  expect(mockTrackPageView).toHaveBeenCalledTimes(1);

  // 用navigate跳转路由
  navigate('/new-location');

  expect(mockTrackPageView).toHaveBeenCalledTimes(2);
});

关于替代useLocation的方案 #

完全不需要替代useLocation，你的组件逻辑是没问题的，问题出在测试方法上。只要确保在同一个Router上下文内修改路由，useLocation就能正确感知到变化，进而触发useEffect。

内容的提问来源于stack exchange，提问作者Konrad Szczęśniak