视觉测试

我们使用 Loki 和 Storybook 进行视觉测试。Loki 会从选定的 Story 中捕获快照，并在 ./loki/references 文件夹中创建 PNG 参考。

本地机器

在本地运行 Loki 测试之前，请确保 Storybook 和 Docker 都在运行。

命令

• 运行视觉测试： yarn test-visual:loki
• 更新失败的快照： yarn test-visual:loki-approve-diff
• 生成 HTML 报告： yarn test-visual:loki-report
• 生成并打开报告： yarn test-visual:loki-report-open

CI

视觉测试会在拉取请求时自动触发。Loki CI 作业会构建 Storybook，捕获新快照，并将其与参考进行比较。如果存在差异，“Loki 视觉回归测试”检查将失败。

要查看视觉差异报告，请打开失败的作业页面，转到“摘要”部分，然后下载 loki-report 工件。

如果差异是故意的或由不稳定因素引起，请通过向拉取请求添加 loki-update 标签来更新参考快照。

添加新测试

添加新测试就像添加新 Story 一样简单。截至目前，我们仅将视觉测试用于图表，但是您可以将其用于任何其他 Story。确保 loki.config.js 中的 storiesFilter 值包含您希望作为视觉测试的 Story。