下载掌阅APP，畅读海量书库
立即打开
问题
大多数React项目都包含一个测试库。最常见的可能是与create-react-app一起使用的@testing-library/react，或者与Preact一起使用的Enzyme。
但更好的做法是在浏览器中直接测试代码，尽管这样做会更复杂。一般来说，浏览器测试可能不稳定，且需要频繁维护，因为每次升级浏览器都需要升级浏览器驱动程序（如ChromeDriver）。
再加上在后端服务器上生成测试数据的问题，基于浏览器的测试的设置和管理可能会很复杂。
解决方案
Cypress测试框架（ https://www.cypress.io ）避免了一般浏览器测试的很多缺点。它可以在浏览器中运行，但不需要外部Web驱动工具。相反，它通过网络端口直接与浏览器（如Chrome或Electron）通信，然后注入JavaScript来运行大部分的测试代码。
我们创建一个create-react-app应用程序来看看Cypress是如何工作的：
现在，我们进入应用程序目录并安装Cypress：
在运行Cypress之前，我们需要对它进行配置，使其能够定位我们的应用程序。我们在应用程序目录中创建一个 cypress.json 文件，写入应用程序的统一资源定位符（URL）：
一旦启动了主应用程序：
就可以打开Cypress：
第一次运行Cypress时，它会安装所有需要的依赖项。现在，我们在 cypress/integration 目录中创建一个名为 screenshot.js 的测试用例，它会打开主页并截图：
你会注意到，我们是用Jest格式来编写测试程序的。在保存后，这个测试用例将出现在Cypress主窗口中，如图1-13所示。
图1-13：Cypress窗口
如果双击测试，Cypress将在浏览器中运行它。应用程序的首页将打开，测试将在 cypress/screenshots/screenshot.js/frontpage.png 中保存一个截图。
讨论
下面是一些使用Cypress可以执行的命令：
这些只是与网页交互的一些命令。Cypress还有其他功能。它还可以修改浏览器内部的代码，从而更改时间（cy.clock()）、cookie（cy.setCookie()）、本地存储（cy.clearLocalStorage()），最厉害的是，它还可以模拟向API服务器发送请求以及响应。
它是通过修改浏览器内建的网络函数来实现的，代码如下：
它会拦截任何以 /api/server? 开头的请求，并返回JSON体的数组[{some: 'Data'}]。
模拟网络响应可以完全改变团队开发应用程序的方式，因为它把前端开发与后端开发分开了。浏览器测试无须创建真实的服务器和数据库就可以指定自己需要的数据。
要了解更多关于Cypress的信息，请访问官方文档（ https://oreil.ly/eX09t ）。
你可以从GitHub网站（ https://oreil.ly/3j8vI ）下载本解决方案的源代码。
[1] 有关自定义标签和命名约定的详细信息，请参见《WHATWG规范》（ https://oreil.ly/KOjmP ）。