测试React Router时按钮点击未触发页面跳转的问题如何解决

问题原因及修复方案 #

1. MemoryRouter 属性使用错误 #

react-router v6 版本中，MemoryRouter 不支持直接传入history属性，你自定义创建的history实例和实际渲染的路由完全独立，自然监听不到跳转行为。有两种修复方式：

• 改用基础Router组件传入自定义history：

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

test('should navigate to /my-page on [Go to my page] button click', async () => {
    const history = createMemoryHistory()
    render(
        <Router location={history.location} navigator={history}>
            <App />
        </Router>
    )
    // 后续逻辑
})

• 直接使用MemoryRouter，通过window.location或者路由内部的history对象做断言。

2. 异步点击未加等待 #

userEvent.click是异步方法，你没有加await关键字，断言执行时点击操作还未触发，因此路径还未更新。需要修改点击代码：

await userEvent.click(myButton)

同时测试函数要标记为async。

3. 多测试用例污染问题 #

你观察到的多测试用例并行运行报错的问题，是因为前序测试渲染的组件未被清理导致的上下文污染：

• 如果你使用自定义container挂载组件，需要在每个测试用例执行后手动清理容器，或者调用react testing library提供的cleanup()方法
• 建议在测试文件的全局钩子中添加清理逻辑：

afterEach(() => {
  cleanup()
})

额外优化建议 #

你的按钮声明为type="submit"，如果外层包裹了form元素，默认的表单提交行为可能会干扰跳转逻辑，建议改为type="button"避免歧义。

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