StorybookAddonTestCodegen 项目启动与配置教程

1. 项目目录结构及介绍

storybook-addon-test-codegen 项目是一个为 Storybook 提供测试代码生成的插件。以下是项目的目录结构及各部分的简要介绍：

• src/：包含插件的源代码。
• scripts/：存放项目构建和辅助脚本。
• .storybook/：Storybook 配置文件夹，包含 Storybook 的预设置和插件注册。
• assets/：存放静态资源，如图片、样式表等。
• e2e/：端到端测试文件。
• README.md：项目说明文件，提供项目描述、安装和配置指南。
• LICENSE：项目许可证文件。
• package.json：定义项目依赖、脚本和元数据。
• tsconfig.json：TypeScript 配置文件。
• vitest.config.ts：vitest 测试框架的配置文件。
• playwright.config.ts：Playwright 端到端测试框架的配置文件。

2. 项目的启动文件介绍

项目的启动主要依赖于 package.json 中的 scripts 字段定义的脚本。以下是常用的启动脚本：

• start：启动 Storybook 服务器，通常在本地开发时使用。
• build：构建 Storybook 的静态文件，用于生产环境。
• test：运行项目的测试套件。

例如，使用以下命令启动 Storybook：

npm start

这会启动一个本地服务器，并打开浏览器窗口显示 Storybook 的界面。

3. 项目的配置文件介绍

项目的配置主要集中在以下几个文件：

• .storybook/main.js 或 .storybook/main.ts：这是 Storybook 的主配置文件，用于注册插件、添加加载器、配置故事和参数。

  // .storybook/main.js
  import { StorybookConfig } from '@storybook/your-framework';
  const config: StorybookConfig = {
    // ...其他配置
    addons: [
      '@storybook/addon-essentials',
      'storybook-addon-test-codegen', // 注册测试代码生成插件
      // ...其他插件
    ],
  };
  export default config;
  

• tsconfig.json：TypeScript 配置文件，用于指定 TypeScript 编译器的选项。

  {
    "compilerOptions": {
      // ...编译器选项
    },
    "include": [
      "src/**/*"
    ]
  }
  

• vitest.config.ts：vitest 测试框架的配置文件，用于配置测试运行器和测试套件。

  import { defineConfig } from 'vitest/config';
  
  export default defineConfig({
    // ...vitest 配置
  });
  

确保按照项目的需求调整这些配置文件，以实现最佳的开发和测试体验。