React Native 集成

在 React Native 中，MSW 的工作方式与 Node.js 类似，但省略了 React Native 中不存在的模块的某些请求拦截器，例如 Node.js 中的标准 http 模块。

¥In React Native, MSW works similarly to Node.js, but omits certain request interceptors for modules that are not present in React Native, like the standard http module in Node.js.

先决条件

¥Prerequisites

Polyfills

MSW 依赖于 React Native 中不存在的标准 JavaScript 类，例如 URL。请安装下面的 polyfill 以确保在 React Native 中正确执行 MSW。

¥MSW relies on standard JavaScript classes that are not present in React Native, like URL. Please install the polyfills below to guarantee proper MSW execution in React Native.

npm install react-native-url-polyfill fast-text-encoding

创建一个新的 msw.polyfills.js 文件，内容如下：

¥Create a new msw.polyfills.js file with the following content:

// msw.polyfills.js
import 'fast-text-encoding'
import 'react-native-url-polyfill/auto'

我们稍后会在 启用模拟 时导入此文件。

¥We will import this file later, when Enabling mocking.

设置

¥Setup

从 msw/native 导入 setupServer 函数并调用它，提供你的请求处理程序作为参数。

¥Import the setupServer function from msw/native and call it, providing your request handlers as the argument.

// src/mocks/server.js
import { setupServer } from 'msw/native'
import { handlers } from './handlers'
 
export const server = setupServer(...handlers)

了解有关 setupServer API 的更多信息。它与 Node.js 和 React Native 相同。

¥Learn more about the setupServer API. It’s the same for Node.js and React Native.

启用模拟

¥Enable mocking

开发

¥Development

在你的 React Native 应用的入口点导入 server 并有条件地调用 server.listen()。

¥Import server in the entrypoint of your React Native application and call server.listen() conditionally.

// index.js
import { AppRegistry } from 'react-native'
import App from './src/App'
import { name as appName } from './app.json'
 
async function enableMocking() {
  if (!__DEV__) {
    return
  }
 
  await import('./msw.polyfills')
  const { server } = await import('./src/mocks/server')
  server.listen()
}
 
enableMocking().then(() => {
  AppRegistry.registerComponent(appName, () => App)
})

不要忘记导入 msw.polyfills.js 模块！

¥Don’t forget to import the msw.polyfills.js module!

测试

¥Testing

测试你的 React Native 应用时，你设置 MSW 的方式将根据你运行测试的方式而有所不同。例如，对于单元/集成测试，你需要单独渲染 React 组件，你应该遵循常规 Node.js 集成 来使用 Vitest 或 Jest 等工具配置 MSW。

¥When testing your React Native application, the way you set up MSW will differ based on how you run your tests. For example, for unit/integration testing where you render your React components in isolation, you should follow the regular Node.js integration to configure MSW with tools like Vitest or Jest.

对于端到端测试，请确保你拥有 在开发中启用 MSW 并相应地生成 React Native 应用的实例（可以随意为此引入新的环境变量）。这样，你将针对已启动并运行 MSW 的应用实例运行端到端测试。

¥For end-to-end testing, make sure you have Enabled MSW in development and spawn the instance of your React Native application accordingly (feel free to introduce new environment variables just for that). That way, you will be running your end-to-end tests against the application instance that has MSW up and running.

常见问题

¥Common issues

无法解析模块 http

¥Unable to resolve module http

原因：你的 React Native 代码最终导入了 React Native 中不存在的 http 模块。

¥Reason: Your React Native code ends up importing the http module that doesn’t exist in React Native.

解决方案：在你的应用中查找错误的 msw/node 导入并将其替换为 msw/native。

¥Solution: Find the incorrect msw/node import in your application and replace it with msw/native.

-import { setupServer } from 'msw/node'
+import { setupServer } from 'msw/native'