随着前端开发的不断发展，代码的复杂度和维护成本也在不断上升，而好的测试可以帮助我们保持代码的质量和稳定性。除了单元测试和集成测试，我们还需要对我们的应用程序进行端到端测试（End-to-End Testing）。在这篇文章里，我将向大家介绍如何使用 Jest 进行 End-to-End 测试。
什么是 End-to-End 测试
End-to-End（E2E）测试是指测试整个应用程序的流程，而不仅仅是测试其中的某个部分。在这种测试中，测试者将使用应用程序的界面进行测试，来模仿真实用户的操作行为。
End-to-End 测试通常需要将测试环境与生产环境分开。在测试环境中，我们可以使用不同的数据库和测试数据，以及进行调试。
Jest 简介
Jest 是一个由 Facebook 开发的 JavaScript 测试框架，适用于撰写 JavaScript 测试和断言。Jest 支持覆盖率报告、快照测试、异步测试和 Mocking，同时支持 TypeScript 等各种类型的测试。
Jest 能够快速而准确地运行测试。而且，Jest 能够缓存运行前测试代码的快照，在后续测试中快速匹配前面运行的结果，大大缩短了测试时间。此外，Jest 有非常完善的文档和社区支持，非常适合在现代化前端项目中使用。
Jest 进行 End-to-End 测试的流程
进行 End-to-End 测试时，我们通常使用以下三种模式之一：
- 人类模式（Human Mode）：以与真实用户相同的方式手动进行测试。
- 自动化人类模式（Automated Human Mode）：使用测试工具来执行场景，测试者提前定义好场景和操作方式，测试工具保证按照测试者事先规定的方式来执行。
- 自动化模式（Automated Mode）：使用测试工具执行测试，该工具可以在不需要人工干预的情况下自动执行测试用例。
在 Jest 中，我们通常会用到第二种和第三种模式。在下文中，我们将用一个简单的示例来阐述 Jest 进行 End-to-End 测试的流程。
示例说明
首先安装 Jest：
npm install --save-dev jest
我们将使用 Jest 和 puppeteer 这两个库。puppeteer 是一个 Node 库，提供了一个高级 API 来控制无头 Chrome 或 Chromium 浏览器环境，用于测试、爬虫等。
在这个示例中，我们将测试 Google 搜索的结果是否匹配。
第一步：编写测试文件
在 Jest 中，测试文件的名称必须以 .test.js 或 .spec.js 结尾。在我们的示例中，将其命名为 google.test.js。代码如下：
-- -------------------- ---- -------
----- --------- - ---------------------
---------------- -------- -- -- -
--- --------
--- -----
--------------- -- -- -
-- ------ --- ------- -- --- --------- -- --- ----
------- - ----- ------------------
--------- ------
------- ---
---
-- ---- - --- ----
---- - ----- ------------------
-- -------- -- --- ------ --------
----- --------------------------------
---
-------------- -- -- -
-- ----- --- ------- -- --- --- -- --- ----
----- ----------------
---
------------ --- ------ --- ----- --- -------- ----- -- -- -
-- ---- ------ -- --- ------ ---
----- ---------------------------- --------
-- ---- --- --- ----------- -- ------
----- ------------------------------
-- ----- --- ------- ------- ------
----- ----------------------
-- ---- --- --- ------ ------- -- ------
----- ----------------------------
-- --- --- ----- -- --- ----- ------
----- ---------------- - ----- --------------- --------- -- -- ----------------
-- ------ ---- --- ----- ------ ------- --- ------------
---------------------------------------- - -- ---------- ---------- ----------
---
---代码解释：
beforeAll函数会在所有测试之前运行。在这里，我们启动一个 Chrome 浏览器实例、打开 Google 首页。afterAll函数会在所有测试之后运行。在这里，我们关闭 Chrome 浏览器实例。- 在测试函数中，我们先在 Google 的搜索框中输入
Jest，然后等待搜索建议出现，再点击Google Search按钮。最后，我们等待搜索结果出现，并检查是否有我们想要的结果。
第二步：运行测试
npx jest google.test.js
如果测试运行成功，你将会看到如下输出：
PASS ./google.test.js
Google Search
✓ Search for "Jest" and check the result (4869 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total第三步：测试成功
如果测试运行成功，这意味着我们的端到端测试已经能够正确地检查我们想要的结果。这个测试可以作为我们的手动测试用例进行保存，以便在后续修改应用程序时调用。同时，我们也可以在测试结束后生成覆盖率报告，检查我们的每个测试是否覆盖了应用程序中的每个方法。
结论
在本文中，我们介绍了 End-to-End 测试的概念，并详细地介绍了使用 Jest 进行 End-to-End 测试的完整流程。我们通过一个简单的例子来展示如何编写 End-to-End 测试案例，并且演示了如何使用 Jest 进行自动化测试。
总之，在你的项目中使用 Jest 测试框架，你可以创建快速、高效、简单易用的测试用例，来增强你的应用程序的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6706294ad91dce0dc8593583