Storybook 的視覺測試擴充功能
在你的 Stories 上執行視覺測試，並將變更與最新的基準進行比較，以便在開發早期捕捉 UI 回歸。支援多個視窗、主題和瀏覽器。
先決條件
- 已設定具有專案存取權的 Chromatic 帳號
- Storybook 7.6 或更高版本
開始使用
執行以下命令以安裝擴充功能，並透過 Storybook 的 CLI 自動為您的專案設定它
npx storybook add @chromatic-com/storybook
啟動 Storybook 並導覽至視覺測試面板，以使用 Chromatic 執行您的第一個視覺測試！
設定
預設情況下，此擴充功能提供零配置支援，以使用 Storybook 和 Chromatic 執行視覺測試。但是，如果您需要，您可以透過提供一些選項來自訂它。有關配置和與 Storybook 一起使用的更多資訊，請參閱 Chromatic 文件。
取得協助
如果您對擴充功能有任何疑問或需要協助，請與 Chromatic 團隊聯繫。 登入 您的 Chromatic 帳號，然後點擊螢幕右下角的聊天圖示，開始與我們對話。
貢獻
我們歡迎您的貢獻！如果您是維護者，請參閱以下 說明，以使用 Chromatic 設定您的開發環境。
更新 GraphQL 綱要
此擴充功能使用 Chromatic 公開的 GraphQL API。我們依賴其綱要來產生類型定義。每當綱要變更時，都需要手動更新。若要更新，請取得 https://github.com/chromaui/chromatic/blob/main/lib/schema/public-schema.graphql 並將其儲存在 src/gql/public-schema.graphql 下。
疑難排解
啟用擴充功能時執行 Storybook 拋出錯誤
安裝後，執行 Storybook 可能會導致以下錯誤
const stringWidth = require('string-width');
Error [ERR_REQUIRE_ESM]: require() of ES Module /my-project/node_modules/string-width/index.js is not supported.
這是使用舊版本 Yarn 套件管理器（例如，1.x 版本）時的 已知問題。若要解決此問題，您可以 升級 至最新的穩定版本。但是，如果您無法升級，請調整您的 package.json 檔案，並提供解析欄位，讓 Yarn 套件管理器安裝正確的相依性。這樣做時，您可能需要刪除 node_modules 目錄和 yarn.lock 檔案，然後再重新安裝相依性。
"resolutions": {
"jackspeak": "2.1.1"
}
版本相容性
此擴充功能的 3.0.0 及更高版本*至少*需要 Storybook 8.2.0。如果您需要 Storybook 8.0 或 8.1 的支援，則需要使用此擴充功能的 2.0.2 版本。
