防止在您的React应用中出现路由错误

几周前,我的团队经历了一次回归:一位开发人员决定按字母顺序重新排列所有路线,并且不再渲染一页。

我们当前使用的是react-router-dom v4.3.1 ,在回归之前,我们的代码基本上如下所示:

React Router文档上,您可以阅读: Switch 呈现 与位置匹配的 第一个子元素

第二个path="/posts"在这里更通用,并且按字母顺序第一个走。 因此,在对路线重新排序之后,在类似posts/post/8的路线上渲染的组件是AllPosts ,而不是SpecificPost 。 因此我们的回归。

我们本可以在上使用exact值,但这意味着将不匹配诸如posts/blablabla类的路由: AllPosts组件将不再是我们对这些路由的后备。

我们应该测试一下吗?

该代码对我们来说似乎纯粹是声明性的,但事实是它包含逻辑。
例如,按的声明顺序有逻辑:应用程序不会以一种或另一种方式呈现相同的内容。 因此,应对此组件进行测试。

确实,对其进行测试带来了多个好处:

  • 发生回归时会发出警报
  • 不必每次都手动测试所有案例,从而节省了我们的时间(减少了挫败感和时间效率)
  • 它记录了路线提供的组件及其对新开发人员的影响。

但是我查了一下,没有找到官方的明确方法来测试。

我们如何测试呢?

要成为一个好的测试,它必须满足一些要求。 它应该是:

  • 健壮:我们正在测试行为,而不是实现。 它不应该关心渲染的组件内部的内容(我不想为每个组件模拟所有的react-intl,redux状态……。测试结果不应受到那些影响)
  • 有用:当渲染的组件不是预期的组件时引发错误
  • 快速

因此,我们不想在测试中渲染实际页面(它们需要大量数据并且渲染时间很长)。
因此,我们jest.mock编辑了所有页面导入,将它们替换为简单的

进行测试。
这是我们测试组件的解决方案:

而已! 告诉我你的想法😉

PS:如果您不想测试此组件并将其完全声明,则可以使用默认的后备组件(例如404页面),并将所有其他路由设置为exact