Storybook 8.1
更有效率、更有條理且更可預測的 Storybook
Storybook 是業界標準的工作坊，用於建構、測試和記錄 UI 組件。每天有數千名開發人員使用它，包括 BBC、Etsy 和 Dropbox 的團隊。
在過去一年中，我們專注於生活品質維護工作。這最終在三月份推出了 Storybook 8.0，這是我們效能最高且最穩定的版本。
現在在 8.x 版本中，我們再次致力於改善您的 UI 開發體驗。為了開始這個目標，我很高興宣布推出更有效率、更有條理且更可預測的 Storybook 8.1
- 🤖 故事自動生成和從控制項儲存
- 🥸 類型安全、基於標準的模組模擬
- ⚛️ 單元測試 React 伺服器組件
- 🧳 Playwright 組件測試的可攜式故事
- 💯 數百項更多改進
用於建立和編輯故事的新 UI
Storybook 的基本單位是故事，這是一小段 JavaScript 程式碼，用於捕捉組件範例。我們努力使故事易於閱讀和編寫，但在 8.1 版本中，我們更進一步：您現在可以從 Storybook 的 UI 建立和編輯故事，而 React 專案可以為新組件新增故事。若要瞭解更多資訊，請閱讀完整公告或查看官方文件。
為 Avatar 組件建立新的生成故事檔案
類型安全模組模擬
組件可能依賴各種輸入和上下文，例如需要在上下文中呈現，或從網路請求接收資料。在開發和測試時，您經常需要模擬這些依賴項。
Storybook 支援各種模擬：從將 props 傳遞到您的組件，到使用裝飾器包裝它們以控制樣式或上下文，再到使用 Mock Service Worker (MSW) 模擬網路請求。
在 8.1 版本中，我們在 Storybook 中新增了模組模擬。這讓您可以彈性地將 JS 模組與受控制的替換項交換。您可以使用它來模擬來自瀏覽器 Cookie、本機儲存或元框架功能（例如您的應用程式路由器）的組件輸入。
我們的模組模擬是完全類型安全的，而且最棒的是，它是完全基於標準的。若要瞭解更多資訊，請閱讀我們的詳細文章或參閱官方文件。
![A screenshot of a portion of a `package.json` file containing the code: { "type": "module", "imports": { "#lib/db": { "storybook": "./lib/db.mock.ts", "default": "./lib/db.ts" }, "#*": [ "./*", "./*.ts", "./*.tsx" ] } }](https://storybookblog.ghost.io/content/images/2024/05/SubpathImports.png)
lib/db 模組新增絕對匯入，並在 Storybook 內部時自動匯入模擬檔案。單元測試 React 伺服器組件
與端對端測試 (E2E) 不同，單元測試速度更快、更不易出錯，並且讓您可以分解 UI 及其測試，以便更輕鬆地驗證關鍵狀態。Storybook 的新模組模擬使我們能夠單元測試 React 伺服器組件 (RSC)，方法是模擬它們所依賴的伺服器模組。對於 React 而言，這是一項重大進展，因為到目前為止，React 一直缺乏 RSC 的單元測試策略。
由於 RSC 目前主要在 Next.js 專案中使用，因此這項工作的大部分涉及建立許多 Next.js 模組的模擬版本。這些模擬會自動被監視並新增關鍵功能（例如能夠設定 Cookie 值），您可以直接在故事中使用這些功能。若要瞭解更多資訊，請查看我們的範例儲存庫並期待完整的公告。
![A screenshot of the `noteDetail.stories.ts` file, containing the code: import { cookies } from '@storybook/nextjs/headers.mock'; import { createUserCookie, userCookieKey } from '#lib/cookie'; import Page from './noteDetail'; const meta = { component: Page, // Use an RSC component in Storybook! async beforeEach() { // Set a Next.js cookie before each story is rendered cookies().set(userCookieKey, await createUserCookie('alice')) }, parameters: { nextjs: { navigation: { pathname: '/note/[id]', query: { id: '1' } }, }, }, } satisfies Meta<typeof Page>](https://storybookblog.ghost.io/content/images/2024/05/RSC.png)
Playwright 組件測試的可攜式故事
在 Storybook 中開發的最大好處之一是您可以免費獲得測試。每個隔離的組件範例（或「故事」）都是一個 UI 測試。如果您想測試資料擷取和使用者互動，Storybook 也提供了相關工具。
現在，首次可以輕鬆地在 Playwright 的實驗性組件測試中重複使用這些故事。此工作流程將 Storybook 的組件開發和文件與 Playwright 強大的測試功能結合在一起。若要瞭解更多資訊，請閱讀完整公告或參閱官方文件。
使用 Playwright 的 VS Code 擴充功能錄製基於故事的測試
數百項更多改進
除了上述功能外，每個 Storybook 版本都包含數百項各個層面的改進和錯誤修正。以下是一些重點
- ✅ 實驗性 React 19 支援 #26960 #26898
- ✅ Angular 18 支援 #27237
- ✅ 支援 Angular 17+ 輸入和輸出訊號 #26413 #26546
- ✅ 用於從側邊欄、自動文件或測試執行中排除故事的標籤 #26634 (官方文件)
- ✅ 唯讀控制項 #26577
- ✅ 支援 Next.js 14.2
useParams#26874
立即試用
Storybook 8.1 今天已發布。在新專案中試用
npx storybook@latest init
或升級現有專案
npx storybook@latest upgrade
如果您要從 7.x 升級，我們有指南可協助您。我們也有從舊版本遷移的指南。
下一步是什麼
我們專注於 8.2 的兩個主要專案
- 減少 Storybook 安裝佔用空間和版本衝突
- 新增故事生命週期 Hook 以與其他測試工具對等
如需我們正在進行和考慮的工作的最新資訊，請查看Storybook 的新路線圖。
致謝
非常感謝 58 位貢獻者，他們在 Storybook 8.1 中提交了 PR！
@43081j @abiriadev @ariperkkio @arnabsen @balazsorban44 @bashmish @benmccann @cdedreuille @chakas3 @cherry @deining @drik98 @eric-blue @ethriel3695 @fatcat560 @fyodorovandrei @ghengeveld @glenjamin @goodactive @hakshu25 @imgbotapp @inokawa @johnendson @jonniebigodes @jorge-ji @joshwooding @jpzwarte @jreinhold @justingish @jwilliams-met @kasperpeulen @kylegach @larsdouweschuitema @larsrickert @laurens94 @leeovictor @lifeiscontent @ndelangen @nkabrown @noranda @r4ai @rui-silva-beqom @scottdotjs @seanparmelee @shilman @shuta13 @simenb @sni-j @spanishpear @takurinton @tmeasday @tobbe @valentinpalkovic @vanessayuenn @xyy94813 @yannbf @yuemori @yukikitagata