在前端开发中，文档和测试是至关重要的。然而，测试部分会比较困难，尤其是针对 UI 组件。happo.io 就是一个解决这个问题的 npm 包。happo.io 可以帮助你对 UI 组件进行视觉测试和自动化快照测试。如果你正在寻找一种方法来提高自己的项目的 UI 组件质量和可靠性，那么 happo.io 就是你需要的工具。
安装 happo.io
你可以通过 npm 包进行安装：
npm install --save-dev happo.io
环境配置
在进行 happo.io 的使用前，你需要进行一些配置。
- 配置设置。找到你的项目的 package.json 文件，在其中添加以下配置：
-- -------------------- ---- ------- -------- - ------- --------- -------- - ---------------- --------------- -- ------------- ------------------- ------------------ --------------------- -------------- ----------------- -------------- ----- --------- - ------- ---------- ------- ---- - -展开代码
一些关于配置选项的说明：
type：指定你的项目的代码类型。这可能只是一个简单的字符串，比如"react"、"vue"等，或者一个函数，函数负责从传入的文件中确定代码类型。files：异步任务之前需要运行的文件列表。components：指定被 happo.io 测试的组件模块，可以是一个包含模糊匹配模式的字符串或一个数组。publicDirectory：指定 happo.io 启动时，public 目录的路径。buildScript：指定在 happo.io 之前需要运行的编译脚本。openBrowser：在 happo.io 启动时，是否自动打开浏览器。server：指定按照其安装 happo.io 的主机和端口。
- 项目根目录下创建
.happo.js文件。这个文件用来配置 happo 环境：
module.exports = { apiKey: '<api-key>', };
<api-key> 可在 happo 网站上获取，用来访问 happo.io API。
使用 happo.io
在进行 happo.io 使用前，请确保你的项目能够运行并生成快照。你也应在你的项目的测试套件中添加快照测试。
想要使用 happo.io, 你需要通过 CLI 进行以下步骤：
- 开发时，启动 happo 客户端：
npx happo init- 开启 happo 服务器：
npx happo server在 happo 的浏览器窗口中，访问你的测试快照。
将其部署到 happo cloud 中，或者直接在本地运行。
示例代码
以下是一个简单的示例来说明 happo.io 的使用方法：
- 安装 happo.io：
npm install --save-dev happo.io
- 修改
package.json配置如下：
-- -------------------- ---- ------- -------- - ------- -------- -------- - ------------ ------------ -- ------------- ---------------- ------------------ --------- -------------- ---- --- ------- -------------- ----- --------- - ------- ---------- ------- ---- - --展开代码
- 创建
.happo.js配置文件：
module.exports = { apiKey: '<api-key>', };
- 启动 happo 客户端：
npx happo init- 运行测试：
npx happo run以上方案演示了如何使用 happo.io 对组件进行自动化测试。此外，happo.io 还有更多功能，比如 baseline 和比较图片等特性，可以帮助你更好的实现测试和文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa3bb5cbfe1ea06103d2
