Storybook 8.2

Storybook 是世界頂尖設計系統（Carbon、Polaris、Fluent、Lightning 等）背後的元件工作坊。因此，它通常與建構和記錄可重複使用的原子元件相關聯。

但 UI 元件有許多尺寸和形狀。

對於 Faire、Yoobic 和 Monday.com 的團隊來說，Storybook 是「產品 UI」的首選工具，例如購物車、儀表板、聊天小工具、日曆和完整頁面。 這些是複雜、具狀態的元件，高品質的測試讓團隊有信心建構和迭代。

這就是為什麼我們在 Storybook 中加強測試的原因。 我很高興宣布 Storybook 8.2，這是我們邁向不妥協元件測試的旅程中的下一站

• 🪝 新的測試鉤子，與其他流行的測試工具達到同等水平
• 🧳 可攜式 stories，可在其他測試和文件工具中重複使用
• 📦 套件整合，以減少依賴衝突
• 🛼 簡化新手入門流程，讓新用戶快速上手
• ✨ 全新且改良的網站，具有更完善的框架文件
• 💯 數百項更多改進

新的測試鉤子

現代測試工具（如 Jest/Vitest/Playwright/Cypress）都使用 Jasmine 測試結構。 每個工具的語法略有不同，但它們都歸結為以下測試鉤子：before/afterAll、before/afterEach、describe 和 test。

Storybook 有自己的 story 語法，元件 Story 格式 (CSF)。 CSF 是捕捉元件各種狀態範例的最佳方式。 在 Storybook 6.4 中，我們新增了 play 函式，以便編寫互動和斷言的腳本

// ToolbarMenu.stories.js
import { fn, expect } from '@storybook/test';
import { ToolbarMenu } from './ToolbarMenu';

export default { component: ToolbarMenu };
export const Disabled = {
  args: { disabled: true, onSelected: fn() },
  play: async ({ canvas, args }) => {
    await userEvent.click(canvas.getByRole('button'));
    expect(args.onSelected).not.toHaveBeenCalled();
  },
};

使用 play 函式，可以在 Storybook 中建立許多 Jasmine 風格的測試。 但並非全部。 而且，如果您是從另一個測試工具轉移過來，則需要一定的學習曲線才能將您的測試轉換為 CSF。

不再需要了。 在 Storybook 8.2 中，我們引入了 before 鉤子（可以傳回清理函式，作為 after 鉤子）和 play 的可選 mount 參數（適用於 React、Vue 3 和 Svelte）。 現在，您可以使用與 Jasmine 風格工具相同的控制流程來編寫元件測試，您可以在單個 play 函式中「安排、執行和斷言」所有內容

// ToolbarMenu.stories.jsx
import { fn, expect } from '@storybook/test';
import { ToolbarMenu } from './ToolbarMenu';

export default {
  component: ToolbarMenu,
};

export const Disabled = {
  args: { disabled: true, onSelected: fn() },
  play: async ({ mount, args }) => {
    // Arrange
    const items = await loadItems(10);
    const canvas = await mount(<ToolbarMenu items={items} />);
    
    // Act
    await userEvent.click(canvas.getByRole('button'));
    
    // Assert
    expect(canvas.getAllByRole('button').length).toBe(items.length);
    expect(args.onSelected).not.toHaveBeenCalled();
  },
};

這是一個非破壞性變更，因此您所有現有的 stories 都將繼續像以前一樣運作。 並且編寫 stories 的建議方式（使用隱式掛載）也沒有改變。 但是，當您需要額外的功能時，新的測試鉤子就在那裡等您。

「第一次使用 @storybookjs play 測試。 我的天啊！🥰 從未寫過這麼快的測試！」
— @brechtilliet

請查看文件，並持續關注完整的功能公告以及未來幾週內更多鉤子範例！

可攜式 stories

Storybook 是迭代建構、記錄和測試元件的最佳工具。 但 JS 生態系統中還有許多其他出色的工具，我們希望您能夠在其中隨心所欲地使用您的 stories。

在 8.1 中，我們發布了適用於 Playwright 元件測試的有限形式「可攜式 stories」。 現在在 8.2 中，我很高興推出適用於 React 和 Vue 3 的可攜式 Stories，並提供實驗性的 Svelte 支援。 這讓您可以符合人體工學地將 story 轉換為框架的「原生」元件，並捆綁一些額外的程式碼來執行 story 可能具有的任何測試鉤子

// Button.test.js
import { test, expect } from 'vitest';
import { screen } from '@testing-library/react';
import { composeStories } from '@storybook/react';
 
// Import all stories and the component annotations from the stories file
import * as stories from './Button.stories';
 
// Every component that is returned maps 1:1 with the stories,
// but they already contain all annotations from story, meta, and project levels
const { Primary, Secondary } = composeStories(stories);
 
test('renders primary button with default args', async () => {
  /**
   * Runs through story lifecycle:
   * 1. loaders
   * 2. beforeEach
   * 3. render w/ decorators (and other annotations)
   * 4. play fn (including mount, when used)
   * 5. cleanup (from beforeEach, hooks)
   */
  await Primary.run();
});

除了 API 之外，我們還準備了額外文件，說明如何在 Vitest 和 Jest 中重複使用您的 stories。 請查看文件，我們將很快發布完整的功能公告。

整合的依賴管理

在調查了超過 2 萬名開發人員後，State of JS 調查是 JS 生態系統的脈搏。 在 2022 年下降之後，我們為改進 Storybook 所做的努力在 2023 年取得了驚人的成果。 這次最大的抱怨是不良的依賴管理：臃腫、安裝佔用空間和版本衝突。

在 8.2 中，我們開始解決這個問題。 我們已將 18 個套件整合到一個核心套件 storybook 和一組用於建構器/渲染器/擴充套件的衛星套件中。 這是一個非破壞性變更，旨在遵循 Vite 的套件結構。 此外，我們正在捆綁 Storybook 的許多依賴項，以消除版本衝突。

我們也一直與 James Garbutt 合作，他是 Ecosystem Performance (e18e) 專案的負責人，以將我們的實用程式庫升級到更小/更快/更現代的版本 (再見 doctrine！👋)。

這項工作仍處於早期階段，但到目前為止，我們已成功將安裝大小/時間縮短約 20%。 新的整合結構為我們未來的最佳化奠定了基礎，因此請密切關注 8.3 及更高版本中更大幅度的下降。

簡化新手入門流程

我們關注的另一個領域是新手入門體驗。 每週有成千上萬的開發人員嘗試 Storybook，但從安裝到成為成功用戶的道路充滿了陷阱。 在 Storybook 8.2 中，我們更新了新手入門體驗，並將其從 React 擴展到 Vue 3 和 Angular，以幫助引導用戶走向正確的方向

請持續關注，我們將在 8.x 中擴展此體驗，使 Storybook 更容易在您的專案中配置。

全新且改良的文件網站

Storybook 有一個全新的文件網站！ 它包括

• ✨ 新首頁，帶有全新的全響應式動畫，更好地說明 Storybook 的許多功能
• 📚 新文件首頁，每個框架都有專用的登陸頁面 (Next.js、SvelteKit 等)
• 🌙 文件淺色/深色模式，以符合您的系統設定
• 🧱 為進一步改進和更快迭代奠定基礎工作

數百項更多改進

除了上述功能外，每個 Storybook 版本都包含數百項各個層面的改進和錯誤修復。 一些重點項目

• ✅ Webpack5/Vite：修復原始碼地圖 - #27171，感謝 @valentinpalkovic！
• ✅  Angular：允許原始碼預覽的格式配置 - #28305，感謝 @64BitAsura！
• ✅ CLI：新增 --no-dev 選項到 init - #26918，感謝 @fastfrwrd！
• ✅ CLI：在新專案中包含 @storybook/addon-svelte-csf - #27070，感謝 @benmccann
• ✅ Core：修復由 watchStorySpecifiers 引起的啟動停滯 - #27016，感謝 @heyimalex！
• ✅ Vue3：啟用新的水合不匹配編譯時標誌 - #27192，感謝 @Cherry

立即試用！

Storybook 8.2 今天發布。 在新專案中試用

npx storybook@latest init

或升級現有專案

npx storybook@latest upgrade

如果您是從 7.x 升級，我們有指南可以幫助您。 我們也有從舊版本遷移的指南。

下一步是什麼

我們正在為 8.3 準備許多內容

1. 與 Vitest 整合，實現極速元件測試
2. 為我們的 Next.js 框架新增 Vite 支援，以實現 Vitest 相容性和更好的 DX
3. 具有 UI 的 Story 標籤，用於互動式側邊欄篩選
4. 進一步縮減安裝大小（試用 8.3-alpha，它又縮小了 40%！）
5. Story 全域變數，一種更簡潔的方式來編寫特定視窗、主題和語言環境的 stories

如需了解我們正在進行和考慮的最新資訊，請查看Storybook 的新路線圖。

致謝

衷心感謝 39 位貢獻者，他們在 Storybook 8.2 中提交了 PR！

@43081j @64bitasura @alexatvista @alirezaebrahimkhani @benmccann @cdedreuille @cherry @cosielq @dario-baumberger @deiga @dexofthewild @edoardocavazza @ghengeveld @girgetto @jonniebigodes @jreinhold @kasperpeulen @kevinfoerster @kongallis @kylegach @mnigh @ndelangen @pl12133 @rocktakey @seanparmelee @shilman @simenb @sinnedh @sni-j @superhermione @tmeasday @tobiasdiez @tony19 @valentinpalkovic @vanessayuenn @yannbf @yk-kd @yuheiy