使用“react-testing-library”和“cypress”有什么区别?

jac*_*son 32 cypress react-testing-library

因此,react-testing-library用于单元/集成测试,并cypress用于 e2e 测试。但是,两者似乎都在做同样的事情:

react-testing-library

  • 促进嘲笑
  • 像用户一样进行测试
  • 从顶级组件开始(不是一个硬性要求,但如果你不这样做,你最终会在子组件测试中得到一堆重复的测试用例)
  • 即时反馈,快速

cypress

  • 促进嘲笑
  • 像用户一样进行测试
  • 从顶级组件(页面)开始
  • 延迟反馈,速度慢,但提供了额外的工具(视频证明、逐步测试等)

除了反馈周期外,它们似乎几乎相同。有人可以澄清有什么区别吗?为什么要同时使用两者?

小智 8

您已经在第一行回答了您的问题。如果您想端到端地测试您的 React 应用程序、连接到 API 并部署在某个地方,您可以使用 Cypress。

react-testing-library的目标是应用程序的较低级别,确保您的组件按预期工作。使用 Cypress,您的应用程序可能会部署在 CDN 后面的环境中,使用缓存,其数据可能来自 API。在 Cypress 中,您还可以编写端到端的旅程,这是一条通过您的应用程序的快乐路径,一旦您部署,它可能会给您带来额外的信心。

  • 是的,但是让我对“react-testing-library”感到困扰的部分是,您_可以_使用它来测试单个组件,但是当您去测试更高/页面级别的组件时,您将需要基本上重复这些测试。如果您只使用“react-testing-library”来测试页面级组件以防止重复,而“cypress”则可以完成所有这些工作(可用于模拟本地测试、部署到服务器测试等),那么为什么要使用“react” -测试库`到底是什么?它的一个好处是快速反馈,但我没有看到任何其他好处。 (7认同)
  • 感谢您的回复!您可以在“cypress”中模拟外部 API 和其他内容,就像在“react-testing-library”中一样,所以我并没有真正看到那里的好处。我理解您关于在“react-testing-library”中编写较低级别测试的观点,但较低级别测试的问题是,当有人去较高级别进行测试时,它可能会导致重复。例如,如果我测试了组件“A”,然后将其放入组件“B”中,则需要在“B”中重复对“A”的测试。那有意义吗? (3认同)
  • 您不必重复“A”和“B”的测试。在“B”中,您只需从与“A”集成的角度以及任何自定义功能的角度对其进行测试。我就是这么看的。 (2认同)

小智 8

这是Kent C. Dodds 的一篇文章来回答您的问题。

我个人的看法是,最具性价比的测试是 Cypress E2E 测试。如果您是测试新手和/或项目刚开始时尤其如此。

随着项目的发展,到了一定程度,通过集成测试添加一些额外的安全网以确保前端工作的某些复杂部分是有意义的。对于这些来说,RTL 是一个更好的工具,运行速度更快,并且您可以使用它获得更细粒度的信息。

最后,很少,当您有一些特定的非平凡逻辑时,例如一些复杂 API 数据的复杂转换,然后将其单元化。

RTL 与 Mock Service Worker 和 Storybook 的配合也非常好。您可能觉得单独使用这些工具都不值得,但是将它们放在一起,哇哦,您拥有了一个令人惊叹的、强大的测试/文档/沙箱系统!