MSW fails to intercept requests in React Native runtime

[JGW-Korea]

“Sorry, I don’t speak English, so I asked GPT to write my situation in Markdown. If something is unclear, please leave a comment.”

Environment

• Expo (React Native runtime)
• Using msw/native with server.listen({ onUnhandledRequest: "error" })

Setip

package.json

"main": "index.ts"

index.ts

import "expo-router/entry";

async function enableMocking() {
  if (__DEV__) {
    await import("./msw.polyfills.js");
    const { server } = await import("./src/mocks/server.ts");
    server.listen({ onUnhandledRequest: "error" });
  }
}
enableMocking();

mocks/server.ts

import { setupServer } from "msw/native";
import { handlers } from "./handlers";

export const server = setupServer(...handlers);

mocks/handlers/index.ts

import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("*/user", () => {
    console.log("Hello");

    return HttpResponse.json({
      id: "abc-123",
      name: "John Doe",
    });
  }),
];

MainScreen

const instance = axios.create({
  baseURL:
    Platform.OS === "android"
      ? "http://10.0.2.2:8080"
      : "http://localhost:8080",
  adapter: "fetch",
});

export default function MainScreen() {
  useEffect(() => {
    console.log("MOUNT");

    async function fetchAPI() {
      try {
        const response = await instance.get("https://api");
        console.log(response);
      } catch (error) {
        console.log(error);
        console.log("error.name:", error.name);

        if (error instanceof Error) {
          console.log("Hello TypeError");
          console.log("error.message:", error.message);
          console.log("error.cause:", error.cause);
        }
      }
    }

    fetchAPI();
  }, []);

  // ...
}

Expected behavior

When making a request to an unhandled endpoint (GET https://api/), MSW should intercept the request and throw:

[MSW] Error: intercepted a request without a matching request handler:
  • GET https://api/

(because onUnhandledRequest: "error" is configured).

Actual behavior

On the first mount in iOS (Expo environment), the app logs:

iOS Bundled 57ms index.ts (1 module)
iOS Bundled 26ms msw.polyfills.js (1 module)
iOS Bundled 9ms src/mocks/server.ts (1 module)
LOG  MOUNT
LOG  [TypeError: Network request failed]
LOG  error.name: TypeError
LOG  Hello TypeError
LOG  error.message: Network request failed
LOG  error.cause: [TypeError: Network request failed]

• The request is not intercepted by MSW.
• No MSW error (intercepted a request without a matching handler) is shown.
• Instead, React Native simply reports a network failure.

Question

• Is this expected behavior in Expo/React Native environments?
• Should msw/native be able to intercept fetch/axios requests in this setup?
• If not supported, would it be possible to clarify this limitation in the documentation?

[trcoffman]

I think the app is mounting before the mocks take effect.