React Testing Library测试react-router 用button角色取元素点击未触发跳转

你遇到的行为差异，本质来自两层可交互元素嵌套带来的事件链路割裂，和按钮默认行为没有直接关系：

• 从你贴的实际DOM结构看，组件最终渲染的是 <a href="/route"> 内部直接包裹 <button> 元素。这种写法本身不符合HTML内容模型规范（锚点标签不允许内部嵌套独立的可交互元素），虽然生产环境下浏览器会容错处理，让真实点击的事件可以正常冒泡触发导航，但在测试环境的模拟事件逻辑下，不同点击目标触发的行为存在明显边界。
• 当你通过screen.getByRole("button", { name: btnText })拿到最内层的原生按钮元素触发fireEvent.click时：
  1. 按钮本身没有绑定任何路由跳转的相关逻辑
  2. 这类用styled-components、组件库封装的按钮，通常会在自身的合成事件处理逻辑中对事件做截断（比如避免重复触发、优化交互防抖），导致从按钮位置派发的点击事件无法顺利冒泡到外层的<a>标签，自然也就触发不了React Router绑定在锚点上的导航处理器，最终路由没有切换，自然找不到Route文本。
• 为什么生产环境点击是正常的？因为真实用户的点击事件由浏览器原生派发，事件传播路径不受组件内部合成事件逻辑的干扰，最终会触达锚点标签，不管是默认的href跳转行为，还是React Router的自定义导航逻辑，都能正常执行。
• 为什么换成getByRole("link")获取外层锚点元素触发点击就正常？因为这时候事件的直接触发目标就是锚点本身，完全绕过了内部按钮的事件处理逻辑，直接命中React Router绑定在锚点上的导航方法，所以测试可以顺利通过。

这不是按钮的默认提交行为导致的问题。你现在的结构相当于同时存在两个重叠的可交互目标：锚点和按钮。可访问性树会把这个区域同时识别为link和button，点哪个、走哪个事件链路是完全模糊的，这也是测试环境和生产环境行为不一致的核心原因。
你没有在组件里调用preventDefault()，但这种嵌套结构本身就破坏了交互语义的一致性，才会出现反常的测试结果。

• 长期最优方案是调整组件实现：彻底去掉锚点包裹按钮的结构，直接在按钮组件内部通过useNavigate Hook调用路由跳转方法，让交互目标和语义完全统一——按钮本身就是可点击的导航入口，不需要依赖外层嵌套的锚点和事件冒泡实现跳转。
• 如果暂时不想调整生产代码，测试阶段可以直接通过getByRole("link")获取外层锚点元素触发点击，更贴近DOM实际承载的导航逻辑。
• 额外补充：路由切换是React状态更新触发的异步渲染过程，不管选择哪个元素触发点击，最好用waitFor包裹后续的断言逻辑，避免因为渲染时序问题出现偶发的找不到元素的报错。

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