Angular 中的 cypress 组件测试和 jasmine karma 测试有什么区别

Question

我对使用 jasmine karma 进行单元测试以及通过模拟组件和服务等外部依赖项来测试特定组件的公共 api、html 模板有很好的理解。

我遇到了 Angular 的 cypress 组件测试。我无法理解与茉莉花业力测试相比，这有什么新作用？有什么优点或者它们有不同的用途吗？

我们在组件测试中是否模拟子组件？ 我找到了一些资源，例如https://github.com/cypress-io/cypress/discussions/17239，但似乎没有任何明确的答案。

Answer 1

取决于您要测试的内容。我的总结是

• Cypress 运行在真实的浏览器中，更接近用户体验。如果只是单元测试，您是否会因为 Jasmine 不使用浏览器而面临无法发现问题的风险？

• 如果挂载CSS模块，可以覆盖CSS。茉莉花也可以做同样的事情吗？不确定，但即便如此，我也不认为 Jasmine 包含 CSS 引擎（就像浏览器那样）。您可以测试应用于 HTML 的 CSS 的结果。例如，可见性检查、行动能力检查。

• 每次测试的覆盖范围更大。不要嘲笑子元素（除非有问题迫使你），然后你在父测试中覆盖子元素。

• Cypress 工具集更广泛，插件范围更广。

• 可以允许组件访问API，或者可以使用

  cy.intercept

  轻松模拟网络

• 测试是按照用户交互的方式构建的，而不是单元测试中使用的方法输入/输出样式。