Storybook 的視覺迴歸測試
基本原理
網路上有一些視覺迴歸工具，但大多數都無法以無頭模式運行，或者使用已棄用且沒有人真正在使用的 PhantomJS。它們通常還需要您維護固定裝置。使用 react-native，現在可以使用單一程式碼庫針對多個平台，但據我所知，沒有單一工具可以測試所有平台。
Loki 的目標是擁有簡單的設定、低維護成本、獨立於運行所在作業系統的可重現測試、可在 CI 上運行，並支援 Storybook 支援的所有平台。
支援的平台
- Docker 中的 Chrome (建議)
- AWS Lambda 中的 Chrome
- 本機 Chrome 應用程式
- iOS 模擬器
- Android 模擬器
先決條件
可選的相依性
- GraphicsMagick 用於 gm 差異引擎，
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 和任何模擬器/模擬器都已啟動並運行。
- 啟動 Storybook 伺服器
yarn storybook - 新增第一組參考檔案
yarn loki update - 對您的元件進行一些更改
- 根據參考資料進行測試
yarn loki test - 檢閱差異資料夾中的變更
- 核准變更並更新參考資料
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 年至今
