在前端开发中，我们经常会用到一些自定义的组件和 UI 库，而这些组件和库的测试和验证是非常重要的。happo-plugin-typescript 是一个 npm 包，它可以帮助我们快速验证我们的组件是否符合预期。
安装
首先，我们需要在项目中安装 happo-plugin-typescript。
npm install --dev happo-plugin-typescript
配置
接下来，我们需要在项目的根目录下创建一个 .happo.js 配置文件，该文件用于配置 happo 的设置以及要测试的组件。在配置文件中添加以下代码：
-- -------------------- ---- -------
----- - ----------------------------- - - ---------------------------------------
----- - -------------------- - - -----------------------------
----- - ------------------- - - ----------------------------
----- -------------------------- - -----------------------------------
-------------- - -
------- ------------
---------- ---------------
-------- -
--------------------------------
-----------------------
----------------------
-----------------------------
--
-------- -
------- ---------
--
-------- -----------------
-- -------- ---------------------- -- ------------------------ ------- -
--apiKey和apiSecret是 happo 提供的 API 密钥，用于上传测试结果到其官方网站。可以在 这里 申请密钥，或在项目的环境变量中设置。plugins中包含了 happo 的几个插件，分别用于匹配图片、HTML、CSS 和 TypeScript。targets指定了要测试的浏览器和版本。include指定了要测试的组件路径和后缀。exclude可选项，用于排除部分文件。如果需要排除，请取消注释并修改 exclude 值。
使用
配置完成后，我们就可以使用 happo 来测试我们的组件了。
命令行
使用命令行 npx happo run 即可运行测试：
npx happo run
启动测试后，happo 会自动打开浏览器，并在页面上展示测试结果。
集成到 CI/CD
如果需要在 CI/CD 中运行测试，我们可以使用 happo 的 CLI 工具。
npm install -g happo-cli happo-ci run .happo.js $TRAVIS_COMMIT
其中，$TRAVIS_COMMIT 是 Travis CI 环境变量，因此需要根据实际情况进行修改。如果不使用 Travis CI，可以将该变量替换为其他变量或值。
示例代码
以下是一个简单的 happo 测试示例，包含了一个有状态和无状态的组件，用于测试组件的 props 是否正确：
-- -------------------- ---- -------
------ - --------- - ---- --------
---- ----- - -
----- -------
--
------ ------- ----- ----------- ------- ---------------- -
----- - -
--------- ------
--
----------- - -- -- -
---------------
--------- -----
---
--
-------- -
----- - ---- - - -----------
----- - -------- - - -----------
------ -
-----
------- -------------------------------- -----------
--------- -- --------------
------
--
-
-
------ ----- ------------------ - -- ---- -- ------ -- -
--
---------------
---
--我们可以使用以下代码来测试组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ ------------ - ------------------ - ---- ---------------------- ----------- --------- ---- ------ -- --------- ----- -- -- - ----- ---- - ------------------ ---------- ---- ----- -------------------------------------- ------------------------------------ --- ----------- --------- ---- --------- ------- ----- -- -- - ----- ---- - ------------------------- ---------- ---- ------------------------------------ ---
以上代码中，toMatchHappoSnapshot() 函数用于检查组件是否符合预期，并生成截图进行比较。如果比较结果相同，则测试通过。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa3ab5cbfe1ea06103ce