视觉测试

我们使用 Loki 与 Storybook 进行视觉测试。Loki 从所选故事中捕获快照并在 ./loki/references 文件夹中创建 PNG 引用。

本地计算机

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

命令

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

CI

在拉取请求上自动触发视觉测试。Loki CI 作业构建 Storybook，捕获新的快照，并将它们与引用进行比较。如果存在差异，则“Loki 视觉回归测试”检查将失败。

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

如果差异是有意的或由 flake 引起的，请通过将 loki-update 标签添加到拉取请求中更新引用快照。

添加新测试

添加新测试就像添加新故事一样简单。截至今天，我们只为图表使用视觉测试，但是你可以为任何其他故事使用它。确保在 loki.config.js 中 storiesFilter 的值包括你想作为视觉测试的故事。