反应测试库:测试路由器重定向

Question

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

单击按钮后，它应该重定向到另一个URL以"new_page"结尾的页面。

这就是我尝试过的，但我总是不确定。

{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/);
});

Answer 1

react-testing-library

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

有关此内容的更多说明，请参阅以下文章：-

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