如何用Jest验证React应用导航跳转后的页面加载状态？

我刚上手React Jest测试的时候也遇到过一模一样的问题，给你分享几个实用的验证思路，分场景来说：

1. 基于React Router的路由状态验证（适合用React Router的项目） #

如果你的项目用的是React Router，最直接的方式是跟踪路由的变化：

• 方法A：Mock useNavigate钩子
  先mock React Router的useNavigate，然后断言点击注册链接后是否调用了正确的路径：

  import { render, screen, fireEvent } from '@testing-library/react';
  import { useNavigate } from 'react-router-dom';
  import LoginPage from './LoginPage';
  
  // Mock useNavigate
  jest.mock('react-router-dom', () => ({
    ...jest.requireActual('react-router-dom'),
    useNavigate: jest.fn(),
  }));
  
  test('点击注册链接跳转到注册页面', () => {
    const mockNavigate = useNavigate;
    render(<LoginPage />);
  
    // 找到注册链接并点击
    const registerLink = screen.getByText('去注册');
    fireEvent.click(registerLink);
  
    // 断言navigate被调用，参数是注册页的路径
    expect(mockNavigate).toHaveBeenCalledWith('/register');
  });
  

• 方法B：用MemoryRouter和history对象
  自定义一个带路由的渲染函数，通过history对象查看当前路径：

  import { render, screen, fireEvent } from '@testing-library/react';
  import { MemoryRouter, createMemoryHistory } from 'react-router-dom';
  import LoginPage from './LoginPage';
  import RegisterPage from './RegisterPage';
  
  test('点击注册链接后路由切换到注册页', () => {
    const history = createMemoryHistory();
    render(
      <MemoryRouter history={history}>
        <LoginPage />
        <RegisterPage />
      </MemoryRouter>
    );
  
    fireEvent.click(screen.getByText('去注册'));
  
    // 断言当前路径是注册页的路径
    expect(history.location.pathname).toBe('/register');
  });
  

2. 验证注册页的可见内容（推荐，符合用户视角） #

React Testing Library提倡从用户的角度测试，所以最靠谱的方式是检查注册页独有的内容是否出现：

比如注册页有一个data-testid="register-page-title"的标题，或者“创建新账号”这样的文本，点击链接后断言这些元素存在：

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import LoginPage from './LoginPage';

test('点击注册链接后加载注册页面', async () => {
  render(
    <MemoryRouter>
      <LoginPage />
    </MemoryRouter>
  );

  // 点击注册链接
  fireEvent.click(screen.getByText('立即注册'));

  // 等待注册页内容加载，断言标题存在
  await waitFor(() => {
    expect(screen.getByTestId('register-page-title')).toBeInTheDocument();
  });

  // 或者直接断言独有的文本
  expect(await screen.findByText('创建你的账号')).toBeInTheDocument();
});

这里用waitFor或者findBy*查询是因为路由跳转可能是异步的，尤其是如果注册页是懒加载组件的话，需要等待组件渲染完成。

3. 检查DOM结构变化 #

如果你的导航是通过切换组件显示/隐藏实现的（比如不用React Router的单页场景），可以直接检查注册页的根元素是否存在：

test('点击注册链接后显示注册组件', () => {
  render(<LoginPage />);
  fireEvent.click(screen.getByText('去注册'));
  // 假设注册组件有一个唯一的类名或testid
  expect(screen.getByTestId('register-container')).toBeInTheDocument();
});

注意事项 #

• 一定要确保测试环境中包含路由上下文，比如用MemoryRouter包裹要测试的组件，否则React Router的钩子会报错。
• 优先选择验证用户可见的内容（方法2），因为这更贴近真实用户的体验，而不是依赖路由内部状态。

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