如何使用Jest测试React中调用useNavigate()的按钮？

核心思路 #

要验证按钮点击后的导航行为，关键是在测试环境中模拟React Router的路由上下文，跟踪路由变化并断言目标路径是否正确。

具体实现步骤与代码示例 #

1. 确认依赖就绪：确保项目已安装@testing-library/react、react-router-dom和history库（后者用于创建内存路由历史记录）。

2. 编写测试用例：

import { render, screen, fireEvent } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import YourComponent from './YourComponent'; // 替换为你的组件实际路径

test('点击"Add New Product"按钮后导航至/adding页面', () => {
  // 创建内存历史对象，用于追踪路由跳转记录
  const history = createMemoryHistory();

  // 在路由上下文内渲染组件，确保navigate钩子能正常工作
  render(
    <Router location={history.location} navigator={history}>
      <YourComponent />
    </Router>
  );

  // 通过预设的data-testid定位目标按钮
  const addProductBtn = screen.getByTestId('addnewpage');

  // 触发按钮点击事件
  fireEvent.click(addProductBtn);

  // 断言当前路由路径是否符合预期
  expect(history.location.pathname).toBe('/adding');
});

补充说明 #

• 如果组件内的navigate是通过useNavigate()钩子获取的，必须将组件包裹在Router（或MemoryRouter）上下文内，否则会抛出钩子使用错误。
• 若需要进一步验证导航有效性，可以在点击后通过screen.getByText()等方法检查目标页面的元素是否渲染。

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