自动化测试是一种在应用开发过程中变得越来越重要的技术。在当今市场上，每天发布的应用程序数量都在不断增长，因此测试是确保应用程序质量符合标准的必要步骤。在本文中，我们将学习如何在 Next.js 中实现自动化测试。
为什么要进行自动化测试？
在开发应用程序时，经常会出现问题。这些问题可能源于代码、外部网站、服务器或其他问题。为了确保应用程序的可靠性和质量，开发人员必须测试应用程序以发现和解决这些问题。如果手动测试的话，会很费时间和精力。自动化测试则能相应地更加快捷、质量可控。
自动化测试是应用程序开发中发现和解决问题的关键步骤之一。自动化测试可以：
- 以标准化和连贯的方式来执行测试用例。
- 自动运行测试过程，从而减少人工时间成本。
- 易于识别错误和问题，提高了应用程序的可靠性和质量。
- 在测试样本上运行各种变体，以便拟合大多数使用情况。
- 让开发人员快速构建、测试和部署应用程序。
如何在 Next.js 中进行自动化测试？
下面我们将学习如何在 Next.js 中实现自动化测试。具体实现过程要点如下：
- 使用 Jest 编写和运行测试。
- 使用 Puppeteer 进行端到端测试。
- 在 Travis CI 上运行测试。
使用 Jest 编写和运行测试
Jest 是一个流行的测试框架，可用于编写和运行 JavaScript 测试。Jest 具有许多实用功能，例如 Jest Snapshots、代码覆盖率检查等。对于前端开发者而言，Jest 测试极为好用。
首先，安装 Jest 和 Enzyme。由于 Next.js 内置 React，因此需要使用 Enzyme 来集成 React 中的测试。使用以下命令来安装所需的包：
--- ------- ---------- ---- ---------------------- ------ -----------------------
然后在 package.json 文件中添加 Jest 配置：
-
---------- -
------- ------
--
------- -
------------------ -----
------------------------------- ---------------------
------------------- -
----------- --------------
-
-
-在根目录下创建 configureJest.js 文件：
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
现在，可以在项目中创建测试文件。例如，假设我们有一个组件 Counter，例如：
------ ----- ---- --------
--------- ----- --
--------- ----- -
------ -------
-
------ ------- ----- ------- ------- ---------------------- ------ -
----- - -
------ -
--
--------- - -- -- -
----------------------- -- --
------ --------------- - -
----
--
--------- - -- -- -
----------------------- -- --
------ --------------- - -
----
--
-------- -
------ -
-----
------- -----------------------------------
-------------------------------
------- -----------------------------------
------
--
-
-我们可以在 components/__tests__/Counter.test.tsx 中编写测试：
------ ------- ---- ----------------------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------------- ---------- ----------- -- -- - ----- ------- - ---------------- ---- ----- ------------ - ----------------------------- ----- ------------ - --------------------- -------------------------------------- ------------------------------- -------------------------------------- --- ------------- ---------- ----------- -- -- - ----- ------- - ---------------- ---- ----- ------------ - ----------------------------- ----- ------------ - --------------------- -------------------------------------- ------------------------------- --------------------------------------- ---
现在运行 npm test 命令即可展示两个测试用例的结果。
使用 Puppeteer 进行端到端测试
Puppeteer 是一个 Node.js 库，它提供了一个高级 API，允许测试端到端的场景（例如浏览器中的自动化操作和网站层）。我们可以使用 Puppeteer 来测试类似于“单击按钮”、“输入表单”和“导航到特定网址”之类的基础功能。
假设我们要编写一个测试用例，以测试我们的 Counter 组件是否能工作。我们可以执行以下操作：
- 打开浏览器并导航到我们的网站。
- 查找与“Counter”组件相关的元素。
- 单击增量按钮，验证计数器是否增加。
- 单击减量按钮，验证计数器是否减少。
在进行 Puppeteer 测试之前，需要添加一些 Jest 和 Puppeteer 测试所需的依赖。使用以下命令安装这些依赖：
--- ------- ---------- --------- -------------------------- --------------
在 package.json 文件中配置 JestPuppeteer：
-
------- -
-------------- ------------------
----------------- ---------------------
--------- -----------------
------------ --------------------
-
-在测试目录下创建 jest/setup.js 文件：
----- --------- - ---------------------
-------------- - ----- -- -- -
------------------ - ----- ------------------
--------- ------
---
--
在测试目录下创建 jest/teardown.js 文件：
-------------- - ----- -- -- - ----- --------------------------- --
现在，我们可以使用 Puppeteer 编写测试用例。在 components/__tests__/Counter.puppeteer.tsx 中编写如下代码：
----- --- - ------------------------
------------------- -- -- -
--------------- -- -- -
----- ---------------
---
------------- ---------- --- ---------- ----------- ----- -- -- -
----- ------------------------------------
--- ----- - ----- ------------------ -- -- --------------
------------------------
----- ------------------------------------
----- - ----- ------------------ -- -- --------------
------------------------
---
---现在运行 npm run test-puppeteer 命令即可执行 Puppeteer 测试用例。这里就不要没有设置好本地服务器，可以本地调试时自己先在本地服务器上部署好，然后再进行时候将 URL 指向本地服务器。
在 Travis CI 上运行测试
Travis CI 是一项持续集成服务，支持 GitHub 上的存储库。Travis CI 可以自动运行您的测试并报告结果。
要将 Travis CI 配置为 Next.js 应用程序的自动化测试，需要执行以下步骤：
- 配置
.travis.yml文件。 - 在
.travis.yml中配置环境变量。 - 配置 Travis CI 的访问令牌。
下面是一个 .travis.yml 文件的示例内容：
--------- -------
--------
- ----
------
------------
- --------------
- ----------
--------
- --- -------
- --- ------- ---------
- --- --- -----
-----
--------
- ------ ------
----- ----- --- ------ ------
------- --- --- -------
- ------ ------
----- ---------- ------
--- ------ -- ------
------- --- --- -----------------
-------------
- --- -------------------- - ---------接下来在 Travis CI 上配置环境变量：COVERALLS_REPO_TOKEN（可以到[coveralls.io/github][coveralls.io/github]申请）。
每当您提交代码时，Travis CI 将启动构建，构建包含您的测试。当构建完成后，Travis CI 将向 GitHub 存储库的提交注释中添加构建状态，并向您发送电子邮件。如果某些测试失败，Travis CI 将发出警报。
总结
在本文中，我们讨论了如何在 Next.js 中进行自动化测试。我们使用 Jest、Enzyme 和 Puppeteer 为我们的应用程序编写和运行测试，并以 Travis CI 的形式自动运行测试。这也是前端工程师应该具备的重要技能之一。我们学习并了解了自动化测试的好处，并在 Next.js 中应用了自动化测试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6547ae497d4982a6eb2077f4