如何使用 react-testing-library 测试锚的 href

Question

我正在尝试测试我的锚标记。一旦我点击它，我想看看 window.location.href 是否是我所期望的。

我尝试渲染锚点，单击它，然后测试 window.location.href ：

 test('should navigate to ... when link is clicked', () => {
  const { getByText } = render(<a href="https://test.com">Click Me</a>);

  const link = getByText('Click Me');

  fireEvent.click(link);

  expect(window.location.href).toBe("https://www.test.com/");
});

我期待测试通过，但 window.location.href 只是 "http://localhost/" 这意味着无论出于何种原因它都没有更新。我什至尝试用 await wait 包装我的期望，但这也不起作用。我找不到太多关于使用 react-testing-library 测试锚的信息。也许有比我正在做的更好的方法来测试它们。 🤷‍♂️

原文由 jaypee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Jest 使用 jsdom 来运行它的测试。 jsdom 是模拟浏览器，但它有一些限制。这些限制之一是您无法更改位置。如果您想测试您的链接是否有效，我建议检查您的 <a> 的 href 属性：

 expect(screen.getByText('Click Me').closest('a')).toHaveAttribute('href', 'https://www.test.com/')

原文由 Giorgio Polvara - Gpx 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我找到了一个可以帮助其他人的解决方案。 <a> 元素被 React 测试库视为 link 角色。这应该工作：

 expect(screen.getByRole('link')).toHaveAttribute('href', 'https://www.test.com');

原文由 Dominic Dabrowiecki 发布，翻译遵循 CC BY-SA 4.0 许可协议