Storybook 视觉测试插件

对您的 Story 运行视觉测试，并将更改与最新基准进行比较，以便在开发早期发现 UI 回归。支持多种视口、主题和浏览器。

先决条件

• 已配置 Chromatic 帐户并可访问项目
• Storybook 7.6 或更高版本

入门指南

运行以下命令安装插件并通过 Storybook 的 CLI 为您的项目自动配置

npx storybook add @chromatic-com/storybook

启动 Storybook 并导航到“视觉测试”面板，使用 Chromatic 运行您的第一个视觉测试！

配置

默认情况下，此插件提供零配置支持，可与 Storybook 和 Chromatic 一起运行视觉测试。但是，如果需要，您可以通过提供一些选项进行自定义。有关使用 Storybook 配置和使用此插件的更多信息，请参阅 Chromatic 文档。

获取帮助

如果您对插件有任何疑问或需要帮助，请联系 Chromatic 团队。登录您的 Chromatic 帐户，然后单击屏幕右下角的聊天图标与我们开始对话。

贡献

我们欢迎贡献！如果您是维护者，请参阅以下说明，以使用 Chromatic 设置您的开发环境。

更新 GraphQL schema

该插件使用 Chromatic 公共 GraphQL API。我们依靠其 schema 来生成类型定义。 schema 更改时需要手动更新。要更新，请获取 https://github.com/chromaui/chromatic/blob/main/lib/schema/public-schema.graphql 并将其保存到 src/gql/public-schema.graphql 下。

故障排除

启用插件运行 Storybook 时抛出错误

安装后，运行 Storybook 可能会导致以下错误

const stringWidth = require('string-width');

Error [ERR_REQUIRE_ESM]: require() of ES Module /my-project/node_modules/string-width/index.js is not supported.

这是使用旧版本 Yarn 包管理器（例如 1.x 版本）时的已知问题。要解决此问题，您可以升级到最新的稳定版本。但是，如果无法升级，请调整您的 package.json 文件并提供 resolution 字段，以使 Yarn 包管理器能够安装正确的依赖项。这样做可能需要在再次安装依赖项之前删除 node_modules 目录和 yarn.lock 文件。

 "resolutions": {
    "jackspeak": "2.1.1"
  }

或者，您可以使用不同的包管理器（npm，pnpm）。

版本兼容性

插件版本	Storybook 版本
^4.0.0	^9.0.0
^3.0.0	^8.2.0
^2.0.2	8.0.0 - 8.1.x

许可

MIT