MSW项目中浏览器与Node.js环境导入的正确使用方式

问题背景

在使用Mock Service Worker(MSW)进行API模拟时，开发者经常会遇到一个常见的错误："Package subpath './browser' is not defined by 'exports'"。这个错误本质上不是MSW的bug，而是由于开发者对MSW在不同运行环境下的使用方式理解不足导致的。

环境区分的重要性

MSW设计时就明确区分了两种运行环境：

1. 浏览器环境：使用msw/browser模块
2. Node.js环境：使用msw/node模块

这种区分是因为MSW在不同环境下采用了不同的实现机制。在浏览器中，它使用Service Worker进行请求拦截；而在Node.js中，则使用http/https模块进行拦截。

典型错误场景分析

1. 测试环境中的错误使用

许多开发者在编写测试时（如使用Playwright或Vitest），会直接在测试文件中导入msw/browser。这是不正确的，因为测试运行器（如Jest、Vitest）通常在Node.js环境中执行测试代码。

2. Playwright中的错误配置

在Playwright测试中，开发者有时会在fixture文件中直接导入浏览器模块。正确的做法应该是：

• 测试逻辑（Node.js环境）使用msw/node
• 应用运行时（浏览器环境）使用msw/browser

正确使用模式

浏览器应用中的使用

// 正确：在浏览器入口文件中
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'

const worker = setupWorker(...handlers)
worker.start()

Node.js测试中的使用

// 正确：在Node.js测试环境中
import { setupServer } from 'msw/node'
import { handlers } from './handlers'

const server = setupServer(...handlers)
beforeAll(() => server.listen())
afterAll(() => server.close())

Playwright集成方案

对于Playwright测试，应该：

1. 在测试配置中使用Node.js模块
2. 通过页面评估(evaluate)将处理程序注入到浏览器环境

// Playwright测试示例
test('some test', async ({ page }) => {
  await page.evaluate(() => {
    // 这里运行在浏览器环境中
    const { setupWorker } = require('msw/browser')
    const worker = setupWorker(...handlers)
    worker.start()
  })
})

最佳实践建议

1. 明确环境边界：清楚区分代码运行的环境
2. 模块导入检查：在导入MSW时，先确认当前执行环境
3. 错误处理：当遇到导入错误时，首先检查环境是否匹配
4. 参考示例：MSW提供了丰富的使用示例，遇到问题时优先参考官方示例

通过遵循这些原则，开发者可以避免常见的环境不匹配问题，充分发挥MSW在API模拟方面的强大功能。