在现代的前端开发工作中，前端应用的复杂度不断提高，SPA（Single Page Application）应用已经成为了主流。作为一个合格的前端开发者，我们需要保证我们的应用在各种情况下都是健康的，且交互方式与用户的预期相符。为了达成这个目标，我们需要用到自动化测试和交互测试。这篇文章将会告诉你如何在应用中添加自动化测试和交互测试。
自动化测试
自动化测试（Automated Testing）是指利用工具和脚本执行的测试，将测试自动化可以提高测试效率，减少测试工作量，并且可以在后续的代码更改中避免很多重复的手动测试。
单元测试
单元测试是指在应用代码的最小单元上进行测试。在前端应用中，单元测试指的是在组件的代码上进行测试。可以利用 Jest 等测试框架，编写测试用例来测试组件是否按预期工作。
以下是一个简单的 Vue 组件测试用例：
------ - ------------ - ---- -----------------
------ ----------- ---- ------------------------------
--------------------------- -- -- -
----------- --------- ---- -------- -- -- -
----- --- - ---- --------
----- ------- - ------------------------- -
---------- - --- -
--
-----------------------------------
--
--这里利用了 Vue 的测试工具，在测试脚本中通过 shallowMount 方法创建了一个 wrapper 对象，然后通过修改组件的 props，测试了组件是否按照预期进行了呈现。
集成测试
集成测试是指在应用的多个组件之间进行测试。在前端应用中，集成测试指的是在多个组件之间进行测试。可以利用 Cypress 等测试工具模拟用户的操作，测试组件之间的交互是否按预期工作。
以下是一个简单的 Cypress 测试代码：
------------ ----- ------ -- -- -
-------- --- -- ------- -- -- -
--------------------------------------
--------------------------------------- -------- ------
--
--这段代码通过访问 Cypress 的官方示例页面，查找是否包含 $title 所代表的文本。这个例子非常简单，但是可以帮助你知道 Cypress 是如何工作的。
交互测试
在自动化测试中，我们已经有了一些工具和方法来测试应用代码。而交互测试（End-to-end Testing）则是模拟真实的用户场景、浏览器兼容性、网络状态、系统实际环境等因素来测试整个应用的流程与功能是否正常。我们可以利用 Puppeteer 等工具来实现交互测试。
Puppeteer
Puppeteer 是一种使用 Node.js 在 Chrome 或 Chromium 中执行自动化(机器人)测试、爬虫等功能的工具。Puppeteer 和其他自动化测试工具的不同之处在于 Puppeteer 提供了完整的浏览器环境，并且可以与 Node.js 将其连接在一起。
以下是一个简单的 Puppeteer 测试代码使用 click 方法模拟了鼠标在页面上的点击事件：
----- --------- - --------------------- ------ -- -- - ----- ------- - ----- ------------------- ----- ---- - ----- ------------------ ----- --------------------------------- ----- --------------------- ----- ------------------------- ---------------- ---- ------ ------------ ----- ---------------- -----
这段代码通过 puppeteer.launch 方法启动了一个 Chrome/Chromium 浏览器实例。然后通过 await page.goto 方法跳转到 https://example.com 网址，然后通过 page.click 模拟点击 a.link 元素。
示例应用
为了更好地演示各种测试的应用，在此我们使用简单的计数器应用。这个应用有一个计数器，可以通过增加或减少的按钮来进行计数操作。
----------
-----
----- ----- ------
------- -----------------------------
------- -----------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ -
-
--
-------- -
----------- -
------------
--
----------- -
-- ----------- - -- -
------------
-
-
-
-
---------添加自动化测试
在本节中，我们将使用 Jest 进行单元测试和 Cypress 进行集成测试。请确保您的应用已经可以正常运行。
Jest 单元测试
首先，我们需要安装 Jest：
--- ------- ---------- ----
然后，在 package.json 文件中添加以下配置：
-
---------- -
------------ ------
-
-创建一个测试文件 test/Counter.spec.js，编写如下测试用例：
------ - ------ -------------- - ---- -----------------
------ ------- ---- --------------------------
----- -------- - ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------- -
--------
--
----------------------------------------
--
-------------- ----- ---- -------- --- -- -- -
----- ------- - -------------- -
--------
--
----- ---------------- - ----------------
-------------------------------------------------
---------------------------------------------- - --
--
-------------- ----- ---- -------- --- -- -- -
----- ------- - -------------- -
--------
--
-------------------------------------------------
----- ---------------- - ----------------
-------------------------------------------------
---------------------------------------------- - --
--
-------- --- --------- ----- -- ----- -- --- -- -- -
----- ------- - -------------- -
--------
--
----- ---------------- - ----------------
-------------------------------------------------
-----------------------------------------------
--
--这个测试文件中定义了测试用例，包含对组件的渲染、单击“增加”和“减少”按钮的测试，还有对接口测试和结果的检查。运行 npm run test:unit 命令，Jest 环境会自动运行所有的单元测试用例并返回测试结果。
Cypress 集成测试
在开始 Cypress 大规模测试之前，请确保已经安装了 Chrome 浏览器，并且网络畅通。否则，Cypress 可能没有正常地工作。执行以下命令来安装 Cypress：
--- ------- ---------- -------
然后，在 package.json 文件中添加以下配置：
-
---------- -
----------- -------- -----
-
-首次运行时，需要先运行 cypress open 命令以创建默认的项目结构。
我们可以创建一个简单的测试 cypress/integration/counter.spec.js：
------------------- -- -- -
------------- -- -
-------------
--
-------------- ----- ---- -------- --- -- -- -
------------------------
---------------- --
--
-------- --- --------- ----- -- ----- -- --- -- -- -
------------------------
---------------- --
--
-------------- ----- ---- -------- --- -- -- -
----------------
------
--------
---------------- ---
--
--这个测试，在每次运行之前访问根路径（默认 http://localhost:8080）。这个测试并没有非常复杂，只是通过点击加减按钮来测试计数器应用中的计数操作。
现在可以运行 cypress open 命令，Cypress 会开始运行你编写的 End-to-end 测试用例，并且在浏览器窗口中进行测试记录和结果渲染。
总结
本文详细地介绍了如何给你的 SPA 应用添加自动化测试与交互测试。我们在这个文档中编写了单元测试、集成测试和最终的交互测试，以确保我们的应用可以在各种情况下正常运行。这些只是测试的一小部分，这篇文章提供的思路和示例代码可以帮助你进一步掌握これ些基础知识，提高你的前端开发技能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64cb33a35ad90b6d041f3458