可视化测试

我们使用 Loki 和 Storybook 进行可视化测试。Loki 会从选定的故事中捕获快照，并在 ./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 标签来更新参考快照。

添加新测试

添加新测试就像添加新故事一样简单。目前，我们仅将可视化测试用于图表，但您也可以将其用于任何其他故事。请确保 loki.config.js 中 storiesFilter 的值包含您希望进行可视化测试的故事。