在过去的测试框架中，端到端测试（E2E）一直是一项乏味的工作。然而，现在很多人都在使用Cypress.io进行测试。他们的文档质量很高，而且他们的API简洁明了。让我们在这个React测试教程系列中使用Cypress。首先，你必须在命令行中把它安装到你的开发依赖项中。
npm install --save-dev cypress
其次，在你的项目文件夹中为Cypress和它的E2E测试创建一个专用文件夹。它自带其给定的文件夹结构。
mkdir cypress
cd cypress
mkdir integration
cd integration
第三，在你的package.json文件中添加一个npm的脚本。这样，你就能从命令行轻松运行Cypress：
{
...
"scripts": {
"start": "webpack serve --config ./webpack.config.js --mode development",
"test:cypress": "cypress open"
},
...
}
之后，第一次运行Cypress：
npm run test:cypress
它打开了一个窗口，表明你还没有任何测试。"No files found in"。
现在，对于你的新Cypress**cypress/integration/**文件夹，为你的App组件创建一个端到端的测试文件。
touch cypress/integration/App.e2e.js
接下来，将你的第一个测试添加到其中。这不是一个真正的端到端测试，只是你可以做的最简单的断言，以验证Cypress是否为你工作：
describe('App E2E', () => {
it('should assert that true is equal to true', () => {
expect(true).to.equal(true);
});
});
你可能已经知道了 "describe "和 "it "块，它们使你能够将你的测试封装在块中。这些块来自Mocha，它被Cypress使用，在引擎盖下。断言，如expect() ，来自Chai。"Cypress建立在这些流行的工具和框架之上，希望你已经对这些工具和框架有一些熟悉和了解。"
现在你可以在命令行上再次运行Cypress。
npm run test:cypress
你现在应该看到以下输出。Cypress找到了你的测试，你可以通过点击它来运行单个测试，或者通过使用其仪表板来运行你的所有测试。
运行你的测试并验证true是否等于真。希望它对你来说是绿色的。否则就有问题了。相比之下，你也可以检查出一个失败的端到端测试：
describe('App E2E', () => {
it('should assert that true is equal to true', () => {
expect(true).to.equal(false);
});
});
如果你愿意，你可以稍微改变脚本，让Cypress默认运行每个测试，而不打开额外的窗口：
{
...
"scripts": {
"start": "webpack serve --config ./webpack.config.js --mode development",
"test:cypress": "cypress run"
},
...
}
正如你所看到的，当你在命令行上再次运行Cypress时，你的所有测试都应该自动运行。此外，你可以体验到有某种视频记录在发生。这些视频被存储在一个文件夹中，供你亲身体验你的测试。你也可以在你的Cypress端到端测试中添加屏幕截图测试。了解更多关于Cypress.io的视频和屏幕截图功能。你可以在你的项目文件夹中的Cypress配置文件中抑制视频录制。它可能已经由Cypress为你生成，否则就在你的根文件夹的命令行上创建它。
touch cypress.json
现在，在Cypress配置文件中，添加video 标志并将其设置为false。
{ "video": false}
如果你想了解更多关于Cypress的配置能力，请查看他们的文档。
最终，你要开始用Cypress测试你实现的React应用程序。由于Cypress提供端到端的测试，你必须在用Cypress访问网站之前首先启动你的应用程序。在这种情况下，你可以使用你的本地开发服务器。
但如何在Cypress脚本之前运行你的开发服务器，在这种情况下是webpack-dev-server？有一个整洁的库，你可以用它来在Cypress之前启动你的开发服务器。首先，在命令行中为你的开发依赖项安装它。
npm install --save-dev start-server-and-test
第二，把它添加到你的package.json文件的npm脚本中。该库希望有以下脚本模式：<start script name> <url> <test script name> 。
{
...
"scripts": {
"start": "webpack serve --config ./webpack.config.js --mode development",
"test:cypress": "start-server-and-test start http://localhost:8080 cypress",
"cypress": "cypress run"
},
...
}
最后，你可以在你的端到端测试中用Cypress访问你正在运行的应用程序。因此，你将使用全局cy cypress对象。此外，你还可以添加你的第一个E2E测试，它从你的应用程序中验证你的标题标签（h1）。
describe('App E2E', () => {
it('should have a header', () => {
cy.visit('http://localhost:8080');
cy.get('h1')
.should('have.text', 'My Counter');
});
});
基本上，这就是Cypress中选择器和断言的工作方式。现在在命令行上再次运行你的测试。它应该是成功的。
在Cypress测试中的一个最佳实践是将基本URL添加到你的cypress.json配置文件中。这不仅是为了保持你的代码干燥，而且对性能也有影响。
{ "video": false, "baseUrl": "http://localhost:8080"}
之后，你可以从你的单一E2E测试中删除URL。它现在总是采取给定的基本URL。
describe('App E2E', () => { it('should have a header', () => { cy.visit(‘/‘);
cy.get('h1') .should('have.text', 'My Counter'); });});
你要实现的第二个E2E测试将测试你的React应用程序中的两个互动按钮。点击每个按钮后，显示在段落标签中的计数器的整数应该改变。让我们首先验证一下，当应用程序刚刚启动时，计数器是0。
describe('App E2E', () => {
it('should have a header', () => {
cy.visit('/');
cy.get('h1')
.should('have.text', 'My Counter');
});
it('should increment and decrement the counter', () => {
cy.visit('/');
cy.get('p')
.should('have.text', '0');
});
});
现在，通过与按钮的交互，你可以增加和减少计数器。
describe('App E2E', () => {
it('should have a header', () => {
cy.visit('/');
cy.get('h1')
.should('have.text', 'My Counter');
});
it('should increment and decrement the counter', () => {
cy.visit('/');
cy.get('p')
.should('have.text', '0');
cy.contains('Increment').click();
cy.get('p')
.should('have.text', '1');
cy.contains('Increment').click();
cy.get('p')
.should('have.text', '2');
cy.contains('Decrement').click();
cy.get('p')
.should('have.text', '1');
});
});
就这样了。你已经用Cypress编写了你的前两个E2E测试。你可以从一个URL导航到另一个URL，与HTML元素交互，并验证渲染的输出。还有两件事：
- 如果你需要为你的E2E测试提供样本数据，请查看在Cypress中使用夹具的最佳实践。
- 如果你需要在Cypress中监视、存根或模拟函数，你可以使用Sinon来实现。Cypress内置了Sinon来测试你的异步代码。
