happo-plugin-storybook 是一个可以帮助我们通过 Happo 截图测试我们的 React 应用的 npm 包。Happo 是一个基于 Chromium 的自动化截图工具，用于捕获和评估您的应用程序在各种设备、浏览器、分辨率和字体方案上的视觉差异。
在本文中，我们将探讨如何使用 happo-plugin-storybook npm 包以及如何进行基本的截图测试。
安装
安装 happo-plugin-storybook 最简单的方法是通过 npm 进行安装：
--- ------- -- ----------------------
前提条件
在继续之前，请确保你已经了解一些基本的 React 和 Storybook 知识。你需要有一个可以用作测试目标的 React 应用程序，可以用 Storybook 进行构建并运行。
本文假设您已经为您的 React 应用程序配置了 Storybook。
配置
在您的项目根目录中创建一个名为 .happo.js 的新文件，然后将以下代码复制到该文件中：
----- - ------------ - - ---------------------------- ----- - --------- - - ---------------------------------- ------------------------
该插件使用 Storybook 框架为给定的一组组件中的每个组件创建快照。上面的代码块旨在在组件的实例化中使用 withHappo 装饰器。
用法
有两种方法可以使用 happo-plugin-storybook 进行快照测试。一种是在命令行使用 Happo。另一种则是集成 Happo with CI/CD。
命令行使用 Happo
要使用 Happo 进行快照测试，需要 Happo CLI （一个是 Happo 官方 CLI 工具）。该 CLI 可以在本地运行快照测试，也可以与 CI/CD 管道一起使用。
首先，安装 happo-cli：
--- ------- -- ---------
接下来，您需要在 Happo 上创建一个新项目。打开一个终端并导航到您的项目根目录。然后执行以下命令：
----- ----
Happo CLI 会在本地文件夹中创建一个 .happo.yml 文件，并提示您输入项目的名称。随后，Happo CLI 将自动生成一个示例快照测试，以便您可以更轻松地了解如何为自己的组件编写快照测试。
可以在 .happo.yml 文件中添加以下节点：
----------- - ----------------------- -------- - ----------------------
这将配置 Happo 自动从我们 Storybook 的 .stories.js 文件中读取我们的组件，并与 happo-plugin-storybook 一起使用。
接下来，运行以下命令以执行快照测试，并生成结果报告：
----- ---
完成后，您可以在 Happo Web UI 上查看您的测试结果。
集成 CI/CD
与任何 CI/CD 管道一样，构建新代码时，您需要确保 happo run 命令在构建过程中自动运行。Happo 社区已经编写了一些很好的文档，以帮助您集成 Happo 与您的 CI/CD 管道。
示例代码
以下是一个使用 happo-plugin-storybook 进行截图测试的示例 .happo.js 文件：
----- - ------------ - - ---------------------------- ----- - --------- - - ---------------------------------- ------------------------
以下是 Happo 的 .happo.yml 示例配置：
----------- - ----------------------- -------- - ----------------------
接下来，您还需要在存储库中创建您的 CI/CD 管道，并包含 happo run 命令。例如，如果您使用 Travis CI，则可以将以下内容添加到您的 .travis.yml 文件：
------- ----- ---
这将使 Travis CI 在构建过程中运行 happo run 命令，并通过 Happo Web UI 显示结果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaa3ab5cbfe1ea06103cc