在現代前端開發中，我們經常會面對這樣的挑戰：如何確保我們的 UI 元件在不同的使用場景下都能穩定運作？如何在不斷變化的需求中保持程式碼的高品質？這些問題通常讓開發者頭痛不已。然而，當我們將 Storybook 與 Jest 結合起來使用時，這些挑戰便能迎刃而解。

什麼是 Storybook？

Storybook 是一個 UI 開發工具，能夠讓我們在獨立的開發環境中構建並測試 UI 元件。我們可以為每個元件建立「故事」（stories），這些「故事」展示了元件在不同狀態下的樣子。例如，一個按鈕元件可以在正常、懸停、禁用等狀態下呈現。這不僅方便我們開發，也讓設計師和 PM 可以直觀地看到元件的效果。

什麼是 Jest？

Jest 是一個強大的 JavaScript 測試框架，它簡單易用，支援斷言、模擬、非同步測試等功能。透過 Jest，我們可以撰寫單元測試和整合測試來確保程式碼的正確性。此外，Jest 還具備快照測試（Snapshot Testing）的功能，可以自動生成元件的快照並檢查變更。

Storybook 與 Jest 的完美結合

當我們將 Storybook 與 Jest 結合使用時，便能實現一個強大的測試方案。具體來說，我們可以利用 Storybook 的 stories 作為 Jest 測試的基礎，這樣可以保證所有的 UI 元件都被全面測試到。

步驟 1：設定 Storybook 和 Jest

首先，我們需要在專案中安裝並設定 Storybook 和 Jest。這可以透過以下命令來完成：

npx sb init
npm install --save-dev jest babel-jest @testing-library/react @testing-library/jest-dom

接著，在 package.json 中配置 Jest：

"scripts": {
  "test": "jest"
},
"jest": {
  "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"],
  "testEnvironment": "jsdom"
}

步驟 2：建立 Storybook 的 Stories

假設我們有一個 Button 元件，我們可以在 Button.stories.jsx 中建立它的 Stories：

import React from "react";
import { Button } from "./Button";

export default {
  title: "Example/Button",
  component: Button,
};

export const Primary = () => <Button primary>Primary Button</Button>;
export const Secondary = () => <Button>Secondary Button</Button>;
export const Disabled = () => <Button disabled>Disabled Button</Button>;

這些 Stories 描述了 Button 元件在不同狀態下的樣子。

步驟 3：撰寫 Jest 測試

接下來，我們可以基於 Storybook 的 Stories 撰寫 Jest 測試。例如，我們可以測試 Button 元件是否在不同狀態下正確渲染：

import React from "react";
import { render } from "@testing-library/react";
import { Primary, Secondary, Disabled } from "./Button.stories";

test("renders Primary Button", () => {
  const { getByText } = render(<Primary />);
  expect(getByText("Primary Button")).toBeInTheDocument();
});

test("renders Secondary Button", () => {
  const { getByText } = render(<Secondary />);
  expect(getByText("Secondary Button")).toBeInTheDocument();
});

test("renders Disabled Button", () => {
  const { getByText } = render(<Disabled />);
  expect(getByText("Disabled Button")).toBeDisabled();
});

這樣的測試確保了 Button 元件在每個狀態下都能正常運作。

步驟 4：結合快照測試

除了基本的渲染測試，我們還可以利用 Jest 的快照測試來追踪 UI 的變化。這可以幫助我們在不經意地修改了元件外觀時，及時發現並確認這些變更是否符合預期。

test("Primary Button matches snapshot", () => {
  const { asFragment } = render(<Primary />);
  expect(asFragment()).toMatchSnapshot();
});

結語

將 Storybook 與 Jest 結合使用，不僅能提高開發過程中的效率，還能確保元件的穩定性和一致性。這樣的測試方案能夠讓我們在面對複雜的 UI 元件時更加自信，並且減少因為程式碼變動而引發的潛在問題。透過這種方法，我們能夠更好地管理元件的品質，讓開發流程變得更加流暢，最終為使用者提供更好的體驗。

這篇文章希望能夠啟發你在開發流程中導入這樣的測試方案，並享受到 Storybook 與 Jest 帶來的便利和可靠性。如果你還沒有試過這種組合，那就趕快動手吧！