MSW Storybook Addon与storybook-addon-mock的区别解析

核心底层差异 #

• MSW Storybook Addon：基于Mock Service Worker（MSW）实现，通过浏览器Service Worker在网络层面拦截请求，完全模拟真实HTTP请求的处理流程，无需修改组件内的请求调用逻辑。
• storybook-addon-mock：基于Storybook装饰器机制，在应用层替换请求实现（如fetch、axios）或直接注入mock数据，本质是覆盖组件的请求依赖而非拦截真实网络请求。

使用方式与配置成本 #

• MSW Storybook Addon：
  • 需要先初始化MSW的Service Worker（执行npx msw init public/这类命令）
  • 编写mock规则的语法和MSW完全一致，示例：

    import { rest } from 'msw'
    
    export const mockUserApi = [
      rest.get('/api/user', (req, res, ctx) => {
        return res(ctx.json({ id: 1, name: 'Test User' }))
      })
    ]
    

  • 支持全局配置（通过.storybook/preview.js）或单Story独立配置，可复用项目中已有的MSW mock代码。
• storybook-addon-mock：
  • 无需额外初始化步骤，直接通过Storybook参数配置mock，示例：

    export default {
      parameters: {
        mock: {
          requests: [
            {
              url: '/api/user',
              method: 'GET',
              response: { id: 1, name: 'Test User' }
            }
          ]
        }
      }
    }
    

  • 支持自动mockfetch/axios，也可自定义mock适配器，配置更轻量化。

功能覆盖范围 #

• MSW Storybook Addon：
  • 支持REST、GraphQL全场景，能模拟错误状态（如404、500）、请求延迟、动态参数匹配（根据请求query/body返回不同数据）。
  • 可与MSW生态联动，比如将Storybook的mock规则直接复用在单元测试、E2E测试中。
  • 兼容Storybook的浏览器和Node两种运行模式。
• storybook-addon-mock：
  • 专注于简单API请求的mock，功能相对基础，适合快速模拟静态响应。
  • 对复杂请求场景（如动态路由、自定义请求头匹配）的支持较弱，无内置的错误/延迟模拟能力（需手动实现）。

生态与维护情况 #

• MSW Storybook Addon：由MSW官方团队维护，社区活跃，文档完善，更新频率高，适配最新的Storybook版本。
• storybook-addon-mock：第三方社区维护，用户基数较小，更新节奏相对缓慢，适配新Storybook版本可能存在滞后。

选择建议 #

• 若项目已使用MSW做测试（单元/E2E），优先选MSW Storybook Addon，可复用mock逻辑，保持全链路mock策略一致，适合复杂API场景。
• 若仅需快速实现简单API mock，不想引入MSW的配置成本，选storybook-addon-mock更轻量化，适合小型组件或基础请求场景。

内容的提问来源于stack exchange，提问作者Tonni