测试基础设施

相关源文件

• code/.storybook/main.ts
• code/.storybook/preview.tsx
• code/.storybook/storybook.setup.ts
• code/addons/vitest/src/vitest-plugin/global-setup.ts
• code/addons/vitest/src/vitest-plugin/index.ts
• code/addons/vitest/src/vitest-plugin/test-utils.ts
• code/addons/vitest/src/vitest-plugin/types.ts
• code/core/assets/server/addon.tsconfig.json
• code/core/assets/server/template.ejs
• code/core/src/common/utils/normalize-stories.ts
• code/core/src/component-testing/components/Subnav.tsx
• code/core/src/components/components/icon/icon.stories.tsx
• code/core/src/components/components/tabs/tabs.helpers.tsx
• code/core/src/components/components/tooltip/ListItem.tsx
• code/core/src/components/components/tooltip/Tooltip.tsx
• code/core/src/components/components/tooltip/TooltipLinkList.tsx
• code/core/src/components/components/tooltip/WithTooltip.stories.tsx
• code/core/src/core-events/index.ts
• code/core/src/core-server/utils/StoryIndexGenerator.test.ts
• code/core/src/core-server/utils/__mockdata__/src/Button.stories.ts
• code/core/src/core-server/utils/__mockdata__/src/first-nested/deeply/Features.stories.jsx
• code/core/src/core-server/utils/__tests__/index-extraction.test.ts
• code/core/src/csf-tools/CsfFile.test.ts
• code/core/src/csf-tools/CsfFile.ts
• code/core/src/csf-tools/index.ts
• code/core/src/csf-tools/vitest-plugin/transformer.test.ts
• code/core/src/csf-tools/vitest-plugin/transformer.ts
• code/core/src/manager-api/lib/stories.test.ts
• code/core/src/manager-api/lib/stories.ts
• code/core/src/manager-api/modules/addons.ts
• code/core/src/manager-api/modules/refs.ts
• code/core/src/manager-api/modules/stories.ts
• code/core/src/manager-api/tests/refs.test.ts
• code/core/src/manager-api/tests/stories.test.ts
• code/core/src/manager/components/sidebar/ContextMenu.tsx
• code/core/src/manager/components/sidebar/Heading.tsx
• code/core/src/manager/components/sidebar/IconSymbols.tsx
• code/core/src/manager/components/sidebar/Menu.tsx
• code/core/src/manager/components/sidebar/Refs.tsx
• code/core/src/manager/components/sidebar/Search.tsx
• code/core/src/manager/components/sidebar/Sidebar.stories.tsx
• code/core/src/manager/components/sidebar/Sidebar.tsx
• code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
• code/core/src/manager/components/sidebar/SidebarBottom.tsx
• code/core/src/manager/components/sidebar/StatusButton.tsx
• code/core/src/manager/components/sidebar/StatusContext.tsx
• code/core/src/manager/components/sidebar/TestingModule.stories.tsx
• code/core/src/manager/components/sidebar/TestingModule.tsx
• code/core/src/manager/components/sidebar/Tree.stories.tsx
• code/core/src/manager/components/sidebar/Tree.tsx
• code/core/src/manager/components/sidebar/types.ts
• code/core/src/manager/container/Sidebar.tsx
• code/core/src/manager/utils/status.test.ts
• code/core/src/manager/utils/status.tsx
• code/core/src/preview-api/modules/preview-web/Preview.tsx
• code/core/src/shared/status-store/index.test.ts
• code/core/src/shared/status-store/index.ts
• code/core/src/shared/universal-store/use-universal-store-manager.test.ts
• code/core/src/shared/universal-store/use-universal-store-manager.ts
• code/core/src/shared/universal-store/use-universal-store-preview.ts
• code/core/src/telemetry/get-framework-info.ts
• code/core/src/types/modules/addons.ts
• code/core/src/types/modules/api-stories.ts
• code/core/src/types/modules/indexer.ts
• code/core/src/types/modules/status.ts
• code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts
• code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts

目的与范围

测试基础设施提供了一个用于在 Storybook 中运行、管理和显示测试结果的综合系统。这包括用于测试交互的用户界面组件、与 Vitest 等测试框架的集成、测试结果的状态管理以及可访问性测试的自动化设置。该系统使开发人员能够直接从 Storybook 用户界面运行测试，并在与其故事的上下文中查看结果。

有关 CLI 工具和项目初始化的信息，请参阅 CLI 和项目初始化。有关插件系统架构的详细信息，请参阅 插件系统。

架构概述

测试基础设施贯穿了 Storybook 架构的多个层次，将测试功能集成到管理器 UI 和预览环境中。

来源：code/core/src/manager/components/sidebar/TestingModule.tsx1-438 code/core/src/manager/components/sidebar/SidebarBottom.tsx1-210 code/addons/vitest/src/vitest-plugin/index.ts1-449

测试提供者系统

测试提供者系统允许插件注册与 Storybook UI 集成的测试功能。测试提供者通过插件系统注册，并在 TestingModule 中渲染自定义 UI 组件。

测试提供者具有以下结构

属性	类型	描述
类型	Addon_TypesEnum.experimental_TEST_PROVIDER	标识插件为测试提供者
id	字符串	测试提供者的唯一标识符
render	() => ReactNode	渲染提供者 UI 的函数
sidebarContextMenu	功能	侧边栏集成的可选上下文菜单

来源：code/core/src/types/modules/addons.ts322-326 code/core/src/manager/components/sidebar/TestingModule.tsx166-178 code/core/src/manager/components/sidebar/TestingModule.stories.tsx25-41

TestingModule UI 组件

TestingModule 是主要的用户界面组件，它在 Storybook 侧边栏中显示测试提供者并管理测试执行。它提供了可折叠的界面、状态指示器和用于运行测试的控件。

该组件负责多项关键职责

• 测试提供者渲染：遍历 registeredTestProviders 并渲染每个提供者的组件
• 动画状态：使用 CSS 关键帧管理测试执行期间的旋转边框动画
• 自动展开：当测试崩溃时自动展开以显示错误详情
• 状态过滤：提供与侧边栏过滤系统集成的错误和警告过滤器按钮

来源：code/core/src/manager/components/sidebar/TestingModule.tsx180-438 code/core/src/manager/components/sidebar/TestingModule.tsx19-27 code/core/src/manager/components/sidebar/TestingModule.tsx253-257

Vitest 集成

Vitest 集成通过一个全面的插件系统，处理故事解析、测试生成和运行时设置，将 Storybook 故事转换为可执行的测试。

故事转换管道

转换过程涉及几个关键步骤

1. 故事文件检测：匹配 /\.stor(y|ies)\./ 模式的文件将被处理
2. CSF 解析：使用 CSF 工具解析故事以提取元数据和故事定义
3. 标签过滤：根据 include/exclude/skip 标签配置过滤故事
4. 测试生成：将有效故事转换为带有正确导入的 Vitest 测试调用

测试设置和执行

Vitest 插件的关键配置选项

选项	类型	描述
storybookScript	字符串	启动 Storybook 服务器的命令
configDir	字符串	Storybook 配置目录的路径
storybookUrl	字符串	Storybook 运行的 URL
tags	TagsFilter	包含/排除/跳过标签配置
disableAddonDocs	布尔值	是否禁用文档插件处理

来源：code/addons/vitest/src/vitest-plugin/index.ts47-53 code/core/src/csf-tools/vitest-plugin/transformer.ts35-281

状态管理

测试基础设施使用集中的状态管理系统来跟踪和显示 Storybook 界面中的测试结果。

状态系统提供了几个关键功能

• 集中式状态：所有测试状态都存储在跨管理器和预览同步的通用存储中
• 分层显示：组件和组节点聚合子故事状态
• 视觉指示器：在侧边栏树和测试模块中显示状态图标
• 过滤集成：状态值用于按错误/警告状态进行侧边栏过滤

来源：code/core/src/shared/status-store/index.ts10-29 code/core/src/manager/components/sidebar/Tree.tsx196-202 code/core/src/manager/components/sidebar/StatusContext.tsx15-19

测试配置和设置

测试基础设施提供自动化的配置和迁移工具，以帮助用户在其 Storybook 项目中设置测试功能。

可访问性测试迁移

当同时安装了 @storybook/addon-a11y 和 @storybook/addon-vitest 时，addonA11yAddonTest 迁移会自动配置项目。

迁移执行了几个关键转换

1. 设置文件更新：添加 a11yAddonAnnotations 导入，并将其包含在 setProjectAnnotations 数组中
2. 预览配置：添加带有适当注释的 parameters.a11y.test 配置
3. 验证：检查转换是否已应用，以避免重复更改

支持的测试框架

框架	包	状态
React	@storybook/react-vite	✅ 支持
Vue 3	@storybook/vue3-vite	✅ 支持
Svelte	@storybook/svelte-vite	✅ 支持
SvelteKit	@storybook/sveltekit	✅ 支持
Angular	@storybook/angular	❌ 不支持

来源：code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts42-219 code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts221-301 code/addons/vitest/src/constants.ts11