加入直播会议:周四,美国东部时间上午 11 点,Storybook 9 发布 & AMA

Storybook Vitest

添加一个用于显示 Vitest 单元测试结果的面板

在 Github 上查看

storybook_vitest_addon

Release

安装

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.org.cn/addons/storybook_vitest_addon