现在的前端开发几乎都离不开测试，而自动化测试工具的使用显得尤为重要。在前端自动化测试工具中，jest-puppeteer 是一个十分优秀的库，提供了集成的 Jest 环境和 Puppeteer 浏览器控制库，可以方便地对前端应用做单元测试、集成测试和端到端测试等各种测试工作。本文针对初学者，详细介绍了如何使用 npm 包 jest-puppeteer 进行测试，并给出了使用示例代码，希望可以帮助到大家。
安装 Jest 和 jest-puppeteer
首先，我们需要安装 Jest 和 jest-puppeteer。可以通过以下命令进行安装：
npm install --save-dev jest jest-puppeteer puppeteer
注意，此处我们还需要安装 puppeteer 浏览器控制库，jest-puppeteer 库会自动载入它。
配置 Jest
接下来，我们需要对 Jest 进行配置。在项目根目录下新建一个 jest.config.js 文件，并加入以下代码：
-- -------------------- ---- -------
-------------- - -
------- -----------------
-------- -
---- -----------------------
--
---------- -
---------------------------
-----------------------------
-
--以上配置中：
- preset 字段指定了使用 jest-puppeteer 环境；
- globals 字段则指定了测试环境的 URL；
- testMatch 字段则用于 Jest 查找测试文件（这里指定了查找 tests 目录和文件名中包含 spec 或 test 的文件）。
至此，Jest 配置完成。
我们来写测试用例
测试用例是我们进行自动化测试的关键，下面我们来编写一个简单的测试用例。假设我们正在测试一个登录组件，需要输入用户名和密码，然后点击登录按钮，最终判断是否跳转了到了成功页面。
我们可以新建一个 test/login.test.js 文件，加入以下代码：
-- -------------------- ---- -------
--------------- ------ -- -- -
--------------- -- -- -
----- -------------- - ---------- -------------- ---
---
---------- ------- ----- ------ ----- -- -- -
----- -------------------------------------------- -------
----- ---------------------------------------------------------------
----- ---------------------------------------------------------------
----- --------------------------------------------------------------
---
---------- ----- -------------- ----- -- -- -
----- ----------------------------------- -------------
----- ----------------------------------- ------------
----- ------------------------------------
----- ------------------------ ---------- -------------- ---
----- ------------------------------ -----------------------
---
---以上代码中：
- beforeAll(): 钩子函数，用于在测试用例执行之前进行一些初始化操作。此处的操作是打开 login 页面；
- it(): 测试用例，分别对登录页面的元素进行断言，然后输入用户名和密码，点击登录按钮，最后对 URL 进行断言，判断是否成功跳转到了 home 页面。
运行测试用例
测试用例编写完成之后，我们就可以通过以下命令运行测试了：
npm run test
等待执行完毕即可查看测试结果。
小结
Jest 和 jest-puppeteer 库的使用教程就到这里了，通过本文的介绍，可以学会基本的 Jest 配置，以及如何使用 jest-puppeteer 进行自动化测试。
在实际项目中，自动化测试是一个必不可少的环节，能够帮助我们在开发过程中发现问题，提高应用的稳定性和可靠性，是一个优秀前端开发者必须掌握的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62069