简介
retox 是一个基于 Jest 和 Puppeteer 的 npm 包，它可以帮助前端工程师做自动化测试。
通过 retox，我们可以方便地实现自动化测试环境的搭建，测试代码的编写，甚至是测试结果的可视化展示。
安装 retox
通过 npm 可以直接安装 retox：
$ npm install retox --save-dev
使用 retox
初始化
在项目根目录下创建一个 config 文件夹，然后在 config 文件夹下创建一个 retox.config.js 文件，文件内容如下：
-- -------------------- ---- -------
-------------- - -
-------- -
-
----- ----------
---------- -----------------
----- ----------
--
--
-其中， name 表示测试模块的名称， testMatch 字段表示测试文件匹配的规则， root 字段表示测试文件夹的根目录。
编写测试文件
在指定的测试文件夹下创建测试文件，以 .test.js 结尾。例如，在 tests 文件夹下创建一个 test.sample.js 文件，文件内容如下：
describe('sample test', () => {
it('should pass', async () => {
await page.goto('http://localhost:3000')
const title = await page.title()
expect(title).toBe('React App')
})
})在上面的代码中，我们使用了 Jest 的语法来编写测试用例。注意，我们使用了 Puppeteer 提供的 page 来模拟访问网页，并通过 expect 来断言测试用例是否通过。
运行测试
我们可以通过在终端中运行以下命令来运行测试：
$ retox
运行完成后，retox 会在终端中输出测试结果。如果测试用例有失败，还会输出失败用例的具体信息。
提供可视化结果
如果需要在浏览器中查看测试结果，我们可以使用 retox-ui 这个 npm 包。
通过以下命令安装：
$ npm install retox-ui --save-dev
然后在 package.json 文件中添加以下配置：
{
"scripts": {
"test": "retox && retox-ui"
}
}通过 npm test 命令运行测试，并显示可视化结果：
$ npm test
总结
retox 是一款非常实用的 npm 包，可以大幅度提升前端自动化测试的效率。通过本文的介绍，我们学习了如何安装和使用 retox，以及如何为测试提供可视化界面。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607a81e8991b448deaa7