React-testing 库：测试路由器重定向答案

【问题标题】：React-testing library: test router redirectReact-testing 库：测试路由器重定向
【发布时间】：2020-08-28 12:56:26
【问题描述】：

如何测试重定向后路由器链接是否更改？

点击一个按钮后，它应该重定向到另一个以“new_page”结尾的 url 页面。

这是我尝试过的，但我一直不确定。

  {getByTestId} = render(<MyButton />);      

  const mockBoxIconButton = getByTestId('box-icon-button');

  mockBoxIconButton.click();

  console.log(getByTestId('box-icon-button').closest('a')); # undefined
  console.log(getByTestId('box-icon-button').location.href);  # undefined

  expect(
    mockExtractionButton.getByTestId('box-icon-button').closest('a')
  ).toHaveAttribute('href', /http[a-zA-Z0-9:\/-]*new_page/);
});

【问题讨论】：

标签： reactjs react-router jestjs react-testing-library

【解决方案1】：

react-testing-library 的目的不是测试代码实现，而是测试用户如何看待 UI 交互。所以在你的情况下，我建议不要在路由后寻找/new_page 路径。而是测试用户在重定向到页面后将与之交互的内容。它可能是另一个按钮交互或标题、段落或跨度标签内的可读数据（无论您最重要的交互感觉如何）。

请参阅以下文章以获得更清晰的信息：-

https://kentcdodds.com/blog/introducing-the-react-testing-library

【讨论】：