加入直播:美国东部时间周四上午 11 点,Storybook 9 发布会和 AMA (问答)

Loki

Storybook 的视觉回归测试工具,已分叉支持 @storybook-react ^7

在 Github 上查看

Storybook 的视觉回归测试

GitHub license Tests npm version npm downloads

基本原理

网络上有一些视觉回归测试工具,但大多数要么无法无头运行,要么使用已弃用且实际上没人使用的 phantomjs 浏览器。它们通常还需要你维护测试夹具。通过 react-native,现在可以用一个代码库针对多个平台,但据我所知,没有一个工具可以测试所有平台。

Loki 的目标是易于设置、维护成本低、测试结果与运行操作系无关且可重现、可在 CI 上运行,并支持 Storybook 支持的所有平台。

支持的平台

  • Docker 中的 Chrome(推荐)
  • AWS Lambda 中的 Chrome
  • 本地 Chrome 应用
  • iOS 模拟器
  • Android 模拟器

先决条件

可选依赖项

  • GraphicsMagick 用于 gm diffing 引擎,brew install graphicsmagick
  • Docker 用于 chrome.docker 目标。
  • Chrome 59+ 用于 chrome.app 目标,brew cask install google-chrome-canary

安装

yarn add loki --dev
yarn loki init

工作流程

Loki 不会为你启动任何服务器,因此在运行测试之前,请确保 Storybook 和任何模拟器/仿真器已启动并正在运行。

  1. 启动 Storybook 服务器 yarn storybook
  2. 添加第一组参考文件 yarn loki update
  3. 对你的组件做一些更改
  4. 根据参考文件进行测试 yarn loki test
  5. 在 diff 文件夹中查看更改
  6. 批准更改并更新参考文件 yarn loki approve

文档

示例

开发

# Install dependencies
yarn
# Start example storybook
yarn workspace @loki/example-react run storybook
# Run example visual tests
yarn workspace @loki/example-react run test
# Run unit tests
yarn test
# Run cli integration tests
cd test/cli && yarn test

维护者

许可证

MIT 许可证。© Joel Arvidsson 2017-至今