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"
}
版本兼容性
插件版本 | Storybook 版本 |
---|---|
^4.0.0 |
^9.0.0 |
^3.0.0 |
^8.2.0 |
^2.0.2 |
8.0.0 - 8.1.x |