使用 React 和 Cypress 进行单元测试

每个开发人员都希望发布一个没有错误的生产应用程序。 为了实现这一点，我们需要考虑如何将测试集成到我们的应用程序中。 我们可以使用许多测试工具、框架和测试类型。

Cypress 是一个现代化的自动化测试套件。 它是一个基于 JavaScript 的完全开源的测试框架，由 Mocha 和 Chai 等支持 BDD 和 TDD 断言样式的库构建。 此外，如果您熟悉用 JavaScript 编写测试，那么使用 Cypress 会很容易。

Cypress 涵盖了两种主要的编写测试风格：端到端测试和单元测试。 在本文中，我们将使用 Cypress 进行单元测试。 我们将概述单元测试，讨论使用赛普拉斯的好处、赛普拉斯的安装、命令和断言，运行赛普拉斯，并编写我们的测试。

• 什么是单元测试？

• 使用 Cypress 进行测试的好处

• 安装赛普拉斯

• 赛普拉斯断言中的命令

• 在我们的应用程序中运行 Cypress

• 设置我们的示例组件

• 在 Cypress 中编写单元测试

什么是单元测试？

开发人员使用单元测试来验证应用程序是否运行良好。 它涉及独立检查应用程序的每个模块。

术语“单元”是指应用程序的单个可测试部分。 此过程可帮助测试人员和开发人员捕捉和理解开发环境中的早期错误。 然后，工作人员有足够的时间来更改任何缺陷代码。

不同类型的测试之间出现混淆的情况并不少见。 下表涵盖了端到端测试和单元测试之间的主要区别：

端到端 (E2E) 测试	单元测试
用于从头到尾测试整个应用程序。	用于测试应用程序的各个单元。
检查应用程序的行为流。	检查单元的功能验证。
通常是一种昂贵的测试手段。	通常是一种具有成本效益的测试方法。
主要是手动执行。	大部分是自动化的。
测试应用程序的端到端部分。	模块单独测试。

由于赛普拉斯涵盖了前面提到的两个测试领域，因此它一直是我们今天构建的现代应用程序的绝佳测试选择。 让我们看看赛普拉斯如何帮助我们构建更好的可测试产品。

使用 Cypress 进行测试的好处

总的来说，这些是我迄今为止发现的使用 Cypress 进行测试的最大好处：

• 时间旅行调试

• 实时代码重新加载

• 当前和以前的状态差异

• 运行无头测试或在浏览器中测试之间的选择

• 能够截取测试的屏幕截图和视频记录

• 异步测试

• 浏览器内调试环境

赛普拉斯测试会拍摄快照，并且可以提供可读的错误和堆栈跟踪，以便于调试。 我们也不需要在测试中添加睡眠超时事件，因为它具有自动等待功能，可确保测试在继续之前等待命令和断言。

我发现赛普拉斯的测试比传统的测试套件更简单，而且速度更快。 Cypress 支持并行执行、导入外部库、操作对象、存根 API 调用和网络流量控制，并且 有很棒的学习文档 。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

此外，赛普拉斯可以测试我们应用程序的每一层，包括 UI、数据库、API、前端存储、跨浏览器功能、XHR 请求等。

安装赛普拉斯

Cypress 在 Node.js 服务器上运行，该服务器经常与浏览器（测试运行器