Storybook Vitest

storybook_vitest_addon

安裝

yarn add storybook_vitest_addon

相容性

"storybook": "^8.1.5",
"@storybook/react": "8.1.5",
"@storybook/react-vite": "^8.1.5",
"vitest": "^1.1.0"

描述

此擴充功能旨在在新的 Storybook 面板中顯示 Vitest 單元測試結果。使用 React 開發和測試。只需將其新增到您的 Storybook 設定中的擴充功能清單，然後您就可以在任何 Story 中使用它。

此擴充功能提供最簡化的視覺效果以達到最大的清晰度。它需要 2 個參數：testResults - JSON 格式的測試結果檔案，以及 testFile - 元件測試檔案的名稱（提供 TypeScript 定義）。

使用範例

// Button.stories.tsx

import vitestResults from "./unit-test-results.json";
/.../
export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    vitest: {
      testFile: "Button.test.tsx",
      testResults: vitestResults,
    },
  },
};
/.../

另請參閱 https://storybook.dev.org.tw/addons/storybook_vitest_addon