npm 包 happo-plugin-storybook 使用教程-JavaScript中文网-JavaScript教程资源分享门户

happo-plugin-storybook 是一个可以帮助我们通过 Happo 截图测试我们的 React 应用的 npm 包。Happo 是一个基于 Chromium 的自动化截图工具，用于捕获和评估您的应用程序在各种设备、浏览器、分辨率和字体方案上的视觉差异。

在本文中，我们将探讨如何使用 happo-plugin-storybook npm 包以及如何进行基本的截图测试。

安装

安装 happo-plugin-storybook 最简单的方法是通过 npm 进行安装：

npm install -D happo-plugin-storybook

在继续之前，请确保你已经了解一些基本的 React 和 Storybook 知识。你需要有一个可以用作测试目标的 React 应用程序，可以用 Storybook 进行构建并运行。

本文假设您已经为您的 React 应用程序配置了 Storybook。

在您的项目根目录中创建一个名为 .happo.js 的新文件，然后将以下代码复制到该文件中：

const { addDecorator } = require('@storybook/react');
const { withHappo } = require('happo-plugin-storybook');

addDecorator(withHappo);

该插件使用 Storybook 框架为给定的一组组件中的每个组件创建快照。上面的代码块旨在在组件的实例化中使用 withHappo 装饰器。

有两种方法可以使用 happo-plugin-storybook 进行快照测试。一种是在命令行使用 Happo。另一种则是集成 Happo with CI/CD。

要使用 Happo 进行快照测试，需要 Happo CLI （一个是 Happo 官方 CLI 工具）。该 CLI 可以在本地运行快照测试，也可以与 CI/CD 管道一起使用。

首先，安装 happo-cli：

npm install -g happo-cli

接下来，您需要在 Happo 上创建一个新项目。打开一个终端并导航到您的项目根目录。然后执行以下命令：

happo init

Happo CLI 会在本地文件夹中创建一个 .happo.yml 文件，并提示您输入项目的名称。随后，Happo CLI 将自动生成一个示例快照测试，以便您可以更轻松地了解如何为自己的组件编写快照测试。

可以在 .happo.yml 文件中添加以下节点：

components:
  - "./src/**/*.stories.js"
plugins:
  - happo-plugin-storybook

这将配置 Happo 自动从我们 Storybook 的 .stories.js 文件中读取我们的组件，并与 happo-plugin-storybook 一起使用。

接下来，运行以下命令以执行快照测试，并生成结果报告：

happo run

完成后，您可以在 Happo Web UI 上查看您的测试结果。

与任何 CI/CD 管道一样，构建新代码时，您需要确保 happo run 命令在构建过程中自动运行。Happo 社区已经编写了一些很好的文档，以帮助您集成 Happo 与您的 CI/CD 管道。

以下是一个使用 happo-plugin-storybook 进行截图测试的示例 .happo.js 文件：

const { addDecorator } = require('@storybook/react');
const { withHappo } = require('happo-plugin-storybook');

addDecorator(withHappo);

以下是 Happo 的 .happo.yml 示例配置：

components:
  - "./src/**/*.stories.js"
plugins:
  - happo-plugin-storybook

接下来，您还需要在存储库中创建您的 CI/CD 管道，并包含 happo run 命令。例如，如果您使用 Travis CI，则可以将以下内容添加到您的 .travis.yml 文件：

script: happo run

这将使 Travis CI 在构建过程中运行 happo run 命令，并通过 Happo Web UI 显示结果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5eedaa3ab5cbfe1ea06103cc