建立重現
可重現的測試案例可讓您隔離問題的原因,這是解決問題的第一步!此頁面概述如何設定以建立重現。
為何您應該建立重現?
可重現的測試案例是分享導致錯誤的特定條件組合的好方法。它允許維護者和社群驗證、縮小問題原因,並協助您修正問題。
先決條件
請確定您已
- 在本機開發機器上安裝
Yarn
。 - 用於託管重現程式碼的 GitHub 帳戶。
- 用於發布您 Storybook 的 Chromatic 帳戶。
初始設定
首先,開啟終端機並執行以下命令
npx storybook@next sandbox
您可以在命令中附加範本名稱以取得篩選後的結果 (例如,npx storybook@next sandbox react
)。
接下來,選擇您要使用的範本
最後,輸入重現的位置
如果您沒有提供重現的完整路徑,它將在目前目錄中產生。
如果一切正常,您應該在本機環境中設定好一個功能齊全的 Storybook。
第三方依賴項與擴充套件
在新增程式碼之前,請安裝和設定任何必要的套件。例如,如果您遇到 CSS 框架的問題 (例如 Tailwind),您應該安裝並設定它。
安裝和設定任何與問題相關的 Storybook 擴充套件 (例如,@storybook/addon-a11y
)。
新增 stories
如果沒有 stories,任何 Storybook 重現都不會完整。為了更快地修正您的問題,我們鼓勵您包含可重現您問題的最小 stories 數量。
託管
當您完成工作後,您需要託管您的重現。首先,登入 GitHub.com 並建立一個新儲存庫。
然後,按照 GitHub 的指示設定儲存庫。
別忘了將 your-username
替換為您自己的帳戶名稱。
發佈
將您的重現部署上線是檢查重現結果的好方法。我們推薦 Chromatic,這是一個由 Storybook 維護者建立的免費發佈服務。它能讓您在雲端安全地部署並託管您的重現。
使用 Chromatic 時的實用資源
提交問題
最後,在 Storybook 問題追蹤器 中建立您的問題,依序完成必要步驟,並提供問題的詳細描述。加入 GitHub 儲存庫和已部署的重現,以協助分類流程。