React单元测试求助：如何测试SiteLogo组件的点击跳转逻辑？

对于原生<a>标签的跳转测试，你不需要模拟实际的页面跳转——因为跳转是浏览器的原生行为，不属于React组件的逻辑范围。我们只需要验证组件渲染出的<a>标签具备正确的href属性即可，这就足够保证点击后会跳转到目标链接。

优化后的测试代码如下：

test("SiteLogo 渲染带有正确跳转链接的锚点", () => {
  render(<SiteLogo />);
  const anchor = screen.getByTestId("SiteLogo-anchor");
  
  // 验证锚点元素存在于DOM中
  expect(anchor).toBeInTheDocument();
  // 验证锚点的href属性值正确
  expect(anchor).toHaveAttribute("href", "https://www.bbc.co.uk/news");
});

额外说明 #

如果你的组件后续改用了前端路由（比如React Router的<Link>组件），那时候才需要模拟路由跳转行为，但目前用原生<a>标签的场景下，测试href的正确性就完全覆盖了需求，不需要额外复杂操作，也不用引入第三方库。

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