E2E（End-to-End）测试是一种全链路测试，主要用于测试应用程序的完整流程。在前端开发中，E2E测试可以验证整体与细节的一致性，节省手动测试的时间和精力。本文将重点介绍使用 Jest 进行 E2E 测试的最佳实践。
为什么选择 Jest？
Jest 是一种功能强大的 JavaScript 测试框架，已被广泛采用。它内置了断言库、模拟库和强大的测试运行程序，可以覆盖多种测试类型。Jest 提供了易于使用和理解的 API，可以有效简化测试的编写和维护。并且 Jest 对 React 应用有很好的支持，可以轻松测试 React 组件和应用程序。
E2E 测试的最佳实践
1. 使用 Puppeteer 进行浏览器控制
Puppeteer 是一个 Node.js 库，提供了控制 Chrome（或 Chromium）的高级 API，可以让我们无需人工干预便能操作浏览器。可以在 Jest 的每个测试用例中，使用 Puppeteer 来模拟用户操作，实现 E2E 测试。比如以下代码可以启动 Chromium 并打开百度网页：
-- -------------------- ---- -------
----- --------- - --------------------
------------ ---- ------- -- -- -
--- -------
--- ----
--------------- -- -- -
------- - ----- ------------------
---- - ----- -----------------
--
-------------- -- -- -
----- ---------------
--
---------- ---- ----------- ----- -- -- -
----- ----------------------------------
----- ----- - ----- ------------
-------------------------------
--
--2. 使用节点选择器进行DOM操作
使用 Puppeteer 可以非常容易地模拟用户操作，但通过元素 id、class 或其他属性来选择和操作节点会非常笨拙，不容易维护。我们可以使用类似 jQuery 的现代选择器来选择节点并进行操作。
-- -------------------- ---- ------- ---------- ----- ----- ------ -------- ----- -- -- - ----- ---------------------------------- ----- ----------- - ----- ------------- ----- ---------------------- --- --------- ----- ------------ - ----- ----------------------------- ----- -------------------- ----- ------------------------------------- ----- ----- - ----- ------------ ------------------------ --- -------------- --
在这个例子中，我们首先选择输入框，输入搜索关键字，然后选择搜索按钮并单击它。最后等待搜索结果并验证页面标题。
3. 组合异步操作和超时设置
异步操作和异步等待是 E2E 测试必须考虑的重要问题。每个异步操作都可能会失败，导致测试用例失败。我们可以使用 Jest 提供的 async/await 语法来组合异步操作，并使用 setTimeout 设置超时时间。在设定超时时间时要根据实际情况设置，太短的时间会导致测试失败，太长的时间会浪费测试时间。
-- -------------------- ---- ------- ---------- ---- ------- ----- ----- -- -- - ----- ---------------------------------- ----- ----- - ----- ------------------- ----- -------------------- ----- ------------ - ----- ---------------- ----- -------------------- ----- ----------- - ----- ------------------------------------- - -------- ---- -- ---------------------------------- --
在这个例子中，我们首先在搜索输入框中输入 "London"，然后单击按钮以触发搜索事件。我们使用 waitForSelector 指定要等待的元素选择器，如果找不到元素，等待将超时并抛出错误。
4. 适应性测试
最后，我们应该测试不同大小和分辨率的屏幕，以确保应用程序的适应性能满足要求。我们可以通过设置 viewport 和 emulate 选项来模拟不同的设备。下面的代码演示了如何测试移动设备的分辨率：
-- -------------------- ---- -------
------------------------- ---- ------- -- -- -
--- -------
--- ----
--------------- -- -- -
------- - ----- ------------------
---- - ----- -----------------
----- --------------
--------- -
------ ----
------- ---
--
---------- --
--
--
-------------- -- -- -
----- ---------------
--
---------- ---- ------ -------- ----- -- -- -
----- ----------------------------------
----- ------ - ----- ----------------
------------ ------------------------------------
--
--在这个例子中，我们将视口设置为宽度为 480 像素和高度为 800 像素的移动设备，并禁用「user agent」，以便在没有重定向的情况下访问我们的应用。我们使用了 boundingBox 方法来检查按钮的存在，这可以检查按钮是否在视口之内。
总结
本文介绍了如何使用 Jest 进行 E2E 测试的最佳实践，其中包括使用 Puppeteer 进行浏览器控制，使用节点选择器进行 DOM 操作，组合异步操作和超时设置，以及适应性测试。这些技巧将帮助您编写更清晰、更健壮的 E2E 测试用例，确保应用程序能够顺利地运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a346efadd4f0e0ffb640eb