Skip to content

MSW fails to intercept requests in React Native runtime #2592

@JGW-Korea

Description

@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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions