Storybook 的视觉测试插件
对您的故事运行视觉测试，并将更改与最新的基线进行比较，以便在开发的早期阶段捕捉 UI 回归。支持多个视窗、主题和浏览器。
先决条件
- Chromatic 已配置帐户，具有访问项目权限
- Storybook 7.6 或更高版本
入门
运行以下命令以安装插件并通过 Storybook 的 CLI 自动为您的项目配置它
npx storybook add @chromatic-com/storybook
启动 Storybook 并导航到视觉测试面板，以使用 Chromatic 运行您的第一个视觉测试！
配置
默认情况下，该插件提供零配置支持，以使用 Storybook 和 Chromatic 运行视觉测试。但是，如果需要，可以通过提供一些选项来对其进行自定义。有关使用 Storybook 配置和使用它的更多信息，请参见 Chromatic 文档。
获取帮助
如果您有任何疑问或需要插件帮助，请联系 Chromatic 团队。 登录 您的 Chromatic 帐户，并点击屏幕右下角的聊天图标，开始与我们交谈。
贡献
我们欢迎贡献！如果您是维护者，请参考以下 说明 使用 Chromatic 设置您的开发环境。
更新 GraphQL 架构
该插件使用 Chromatic 公共 GraphQL API。我们依赖于其架构来生成类型定义。每当架构发生更改时，都需要手动更新它。要更新，请获取 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 文件并提供一个解析字段，以使 Yarn 包管理器能够安装正确的依赖项。这样做时，您可能需要在再次安装依赖项之前删除 node_modules 目录和 yarn.lock 文件。
"resolutions": {
"jackspeak": "2.1.1"
}
版本兼容性
此插件的 3.0.0 及更高版本需要至少 Storybook 8.2.0。如果您需要对 Storybook 8.0 或 8.1 的支持，则需要使用此插件的 2.0.2 版本。
