Following the React Native integration docs leads to errors

[tomgransden]

Hello, I have been trying to follow the React Native integration documents and assorted Github issues but I cannot get the integration working. I'd really love to as I want to run MSW for my E2E tests to mock the backend. I have verified MirageJS works as intended but we already use MSW for unit tests so want to try and get it working.

React Native version: 0.77.2
MSW version: 2.10.4

Any help would be appreciated.

Code samples:

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

// src/mocks/server.js
import { setupServer } from 'msw/native';

import { accountHandlers } from '../test/servers/msw/handlers/ecomm/account';

const handlers = [...accountHandlers];

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

// index.js
/**
 * @format
 */
import 'intl-pluralrules';
import { AppRegistry } from 'react-native';
import 'react-native-gesture-handler';

import { name as appName } from './app.json';
import App from './src/App';

if (__DEV__) {
  import('./reactotron.config')
    // eslint-disable-next-line no-console
    .then(() => console.log('Reactotron Configured'))
    // eslint-disable-next-line no-console
    .catch(() => console.log('Reactotron failed to initialize'));
}

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);
});

Errors encountered:

[LeOndaz]

same

[LeOndaz]

So, I had no time to debug this, I just bruteforced my way in

// BroadcastChannel.ts

// Production-grade BroadcastChannel polyfill for React Native

// Create EventTarget
global.EventTarget = class EventTarget {
  private listeners: Map<string, Function[]> = new Map();

  addEventListener(type: string, listener: Function) {
    if (!this.listeners.has(type)) {
      this.listeners.set(type, []);
    }
    this.listeners.get(type)!.push(listener);
  }

  removeEventListener(type: string, listener: Function) {
    const typeListeners = this.listeners.get(type);
    if (typeListeners) {
      const index = typeListeners.indexOf(listener);
      if (index > -1) {
        typeListeners.splice(index, 1);
      }
    }
  }

  dispatchEvent(event: any) {
    const typeListeners = this.listeners.get(event.type);
    if (typeListeners) {
      typeListeners.forEach(listener => listener(event));
    }
    return true;
  }
} as any;

// Create Event
global.Event = class Event {
  type: string;
  bubbles: boolean;
  cancelable: boolean;
  
  constructor(type: string, options?: { bubbles?: boolean; cancelable?: boolean }) {
    this.type = type;
    this.bubbles = options?.bubbles || false;
    this.cancelable = options?.cancelable || false;
  }
} as any;

// Create MessageEvent
global.MessageEvent = class MessageEvent extends Event {
  public readonly data: any;
  public readonly origin: string;
  public readonly source: any;
  public readonly ports: readonly MessagePort[];

  constructor(type: string, eventInitDict?: { data?: any; origin?: string; source?: any; ports?: MessagePort[] }) {
    super(type);
    this.data = eventInitDict?.data;
    this.origin = eventInitDict?.origin || '';
    this.source = eventInitDict?.source || null;
    this.ports = eventInitDict?.ports || [];
  }
} as any;

// Global registry to simulate cross-context communication
const channels = new Map<string, Set<BroadcastChannelPolyfill>>();

class BroadcastChannelPolyfill extends EventTarget {
  public readonly name: string;
  public onmessage: ((event: MessageEvent) => void) | null = null;
  public onmessageerror: ((event: MessageEvent) => void) | null = null;
  private _closed = false;

  constructor(name: string) {
    super();
    this.name = name;
    
    // Register this channel instance
    if (!channels.has(name)) {
      channels.set(name, new Set());
    }
    channels.get(name)!.add(this);
  }

  postMessage(message: any): void {
    if (this._closed) {
      throw new Error('Cannot post message: BroadcastChannel is closed');
    }

    // Clone the message (simulate structured clone)
    let clonedMessage: any;
    try {
      clonedMessage = JSON.parse(JSON.stringify(message));
    } catch {
      clonedMessage = message; // Fallback for non-serializable data
    }

    // Broadcast to all other instances of this channel (async)
    setTimeout(() => {
      const channelInstances = channels.get(this.name);
      if (channelInstances) {
        channelInstances.forEach(instance => {
          if (instance !== this && !instance._closed) {
            const event = new MessageEvent('message', {
              data: clonedMessage,
              origin: 'null',
              source: null,
              ports: []
            });
            
            // Call onmessage handler
            if (instance.onmessage) {
              instance.onmessage(event);
            }
            
            // Dispatch event to listeners
            instance.dispatchEvent(event);
          }
        });
      }
    }, 0);
  }

  close(): void {
    if (this._closed) return;
    
    this._closed = true;
    
    // Remove from registry
    const channelInstances = channels.get(this.name);
    if (channelInstances) {
      channelInstances.delete(this);
      if (channelInstances.size === 0) {
        channels.delete(this.name);
      }
    }
    
    // Clear event listeners
    this.onmessage = null;
    this.onmessageerror = null;
  }

  addEventListener(type: string, listener: EventListener | EventListenerObject | null, options?: boolean | AddEventListenerOptions): void {
    if (this._closed) return;
    super.addEventListener(type, listener, options);
  }

  removeEventListener(type: string, listener: EventListener | EventListenerObject | null, options?: boolean | EventListenerOptions): void {
    super.removeEventListener(type, listener, options);
  }

  dispatchEvent(event: Event): boolean {
    if (this._closed) return false;
    return super.dispatchEvent(event);
  }
}

global.BroadcastChannel = BroadcastChannelPolyfill as any;

// server.ts
/**
 * Custom MSW Server Implementation for React Native
 * Simplified version using direct function calls instead of events
 */

// Disposable base class
class Disposable {
  protected subscriptions: (() => void)[] = [];

  dispose() {
    let subscription;
    while (subscription = this.subscriptions.shift()) {
      subscription();
    }
  }
}

// Handler controller for managing MSW handlers
class HandlersController {
  private handlers: any[];
  private initialHandlers: any[];

  constructor(initialHandlers: any[]) {
    this.initialHandlers = [...initialHandlers];
    this.handlers = [...initialHandlers];
  }

  prepend(runtimeHandlers: any[]) {
    this.handlers.unshift(...runtimeHandlers);
  }

  reset(nextHandlers: any[]) {
    this.handlers = nextHandlers.length > 0 ? [...nextHandlers] : [...this.initialHandlers];
  }

  currentHandlers() {
    return this.handlers;
  }
}

// Request interceptor for fetch
class FetchInterceptor {
  private originalFetch: typeof fetch;
  private isApplied = false;
  private requestHandler: ((request: Request) => Promise<Response | null>) | null = null;

  constructor() {
    this.originalFetch = global.fetch;
  }

  setRequestHandler(handler: (request: Request) => Promise<Response | null>) {
    this.requestHandler = handler;
  }

  apply() {
    if (this.isApplied) return;
    
    const self = this;
    global.fetch = async function(input: RequestInfo | URL, init?: RequestInit) {
      const request = new Request(input, init);
      
      // Try to get mock response
      let mockResponse: Response | null = null;
      if (self.requestHandler) {
        try {
          mockResponse = await self.requestHandler(request);
        } catch (error) {
          console.error('❌ Handler processing error:', error);
        }
      }

      // If we have a mock response, return it
      if (mockResponse) {
        console.log('🎭 Returning mock response');
        return mockResponse;
      }

      // Otherwise, proceed with original fetch
      console.log('🌐 Proceeding with real fetch');
      const fetchInput = input instanceof URL ? input.toString() : input;
      return self.originalFetch.call(this, fetchInput, init);
    };

    this.isApplied = true;
  }

  dispose() {
    if (!this.isApplied) return;
    global.fetch = this.originalFetch;
    this.isApplied = false;
    this.requestHandler = null;
  }

  get readyState() {
    return this.isApplied ? 'APPLIED' : 'IDLE';
  }
}

// Execute handlers to find matching response
async function executeHandlers(request: Request, handlers: any[]): Promise<Response | null> {
  for (const handler of handlers) {
    try {
      // Orval handlers are MSW http handler objects
      if (handler && typeof handler === 'object' && handler.info) {
        const { info } = handler;
        
        // Extract URL pattern and method from handler info
        const handlerPath = info.path || '';
        const handlerMethod = info.method || '';
        
        // Parse request URL
        const url = new URL(request.url);
        const pathname = url.pathname;
        
        // Match method
        if (handlerMethod && handlerMethod.toLowerCase() !== request.method.toLowerCase()) {
          continue;
        }
        
        // Match URL pattern (convert MSW pattern to regex)
        const pattern = handlerPath.replace(/\*/g, '.*').replace(/:\w+/g, '[^/]+');
        const regex = new RegExp(pattern + '$');
        
        if (regex.test(pathname)) {
          console.log(`✅ Handler matched: ${handlerMethod} ${handlerPath}`);
          
          // Execute the handler resolver
          if (handler.resolver && typeof handler.resolver === 'function') {
            console.log('🚀 Executing handler resolver...');
            const mockInfo = {
              request,
              params: {},
              cookies: {}
            };
            
            const response = await handler.resolver(mockInfo);
            console.log('✅ Handler resolver returned response');
            return response;
          }
        }
      }
    } catch (error) {
      console.warn('Handler execution failed:', error);
    }
  }
  
  return null;
}

// Main request handling logic
async function handleRequest(
  request: Request,
  handlers: any[],
  options: any
): Promise<Response | null> {
  // Check for passthrough header
  if (request.headers.get('accept')?.includes('msw/passthrough')) {
    return null;
  }

  try {
    // Try to find matching handler
    const response = await executeHandlers(request, handlers);
    
    if (!response) {
      // No handler matched
      if (options.onUnhandledRequest === 'warn') {
        console.warn(`[MSW] Warning: captured a request without a matching request handler:
        
  • ${request.method} ${request.url}
  
If you still wish to intercept this unhandled request, please create a request handler for it.`);
      }
      return null;
    }

    return response;
  } catch (error) {
    console.error('Request handling error:', error);
    throw error;
  }
}

// Base setup API
class SetupApi extends Disposable {
  protected handlersController: HandlersController;

  constructor(...initialHandlers: any[]) {
    super();
    this.handlersController = new HandlersController(initialHandlers);
  }

  use(...runtimeHandlers: any[]) {
    this.handlersController.prepend(runtimeHandlers);
  }

  resetHandlers(...nextHandlers: any[]) {
    this.handlersController.reset(nextHandlers);
  }

  listHandlers() {
    return this.handlersController.currentHandlers();
  }
}

// Main server implementation
class SetupServerCommonApi extends SetupApi {
  private interceptor: FetchInterceptor;
  private resolvedOptions: any = {};

  constructor(interceptors: FetchInterceptor[], handlers: any[]) {
    super(...handlers);
    this.interceptor = interceptors[0]; // Use first interceptor
  }

  listen(options: any = {}) {
    this.resolvedOptions = {
      onUnhandledRequest: 'warn',
      ...options
    };

    // Set up request handler
    this.interceptor.setRequestHandler(async (request: Request) => {
      return handleRequest(
        request,
        this.handlersController.currentHandlers(),
        this.resolvedOptions
      );
    });

    this.interceptor.apply();
    this.subscriptions.push(() => this.interceptor.dispose());
    
    console.log('🎭 Custom MSW server listening');
  }

  close() {
    this.dispose();
    console.log('🎭 Custom MSW server closed');
  }
}

// Factory function to create server (mimics MSW's setupServer)
export function setupServer(...handlers: any[]) {
  return new SetupServerCommonApi([new FetchInterceptor()], handlers);
}

// index.ts

// those two from above
import "./src./.../BroadcastChannel.ts"
import { server } from "./src/.../server.ts"

import 'fast-text-encoding'
import 'react-native-url-polyfill/auto'

import { ExpoRoot } from 'expo-router';
import { registerRootComponent } from "expo"

const App = () => {
  const ctx = require.context('./src/app');
  return <ExpoRoot context={ctx} />;
};

async function enableMocking() {
  console.log('🔍 Checking mock mode...');
  
  if (!__DEV__) {
    console.log('📱 Production mode - skipping MSW');
    return;
  }
  
  if (process.env.EXPO_PUBLIC_MOCK_MODE !== 'true') {
    console.log('📱 Mock mode disabled - skipping MSW');
    return;
  }

  console.log('🎭 Mock mode enabled - setting up MSW...');
  
  try {
    console.log('📦 Importing MSW server...');
    const mswModule = await import('./src/mocks/msw');
    
    const { server } = mswModule;
    
    if (!server) {
      console.error("no server")
      throw new Error('Server is undefined - check MSW exports');
    }
    
    console.log('🚀 Starting MSW server...');
    server.listen();
    
    console.log('✅ MSW enabled successfully');
  } catch (error) {
    console.error('❌ MSW setup failed:', error);
    console.error('Stack:', error.stack);
  }
}

console.log('📱 Starting app initialization...');

enableMocking();
registerRootComponent(App);

This makes it work and I tested it, I didn't care much nor put effort, but it works

[hariDasu]

thank you for this detailed post, @LeOndaz

I used alot of this and rolled in a custom server to use instead of msw/native to work in a couple applications

In environments I tested in was using:

• trpc
• axios

Wondering if using expo/fetch makes this simpler?

cc Winter-cg compliance?

[mordonez-me]

I hope this helps, I have it working properly in expo 55 this way:

1. You don't need polyfiils anymore
2. If you use expo/fetch you have to mock it with get like this

// jest.setup.ts
import { server } from "@/mocks/msw/server"; // <- my server location
import "whatwg-fetch";

jest.mock("expo/fetch", () => ({
  get fetch() {
    return global.fetch;
  },
}));

beforeAll(() => {
  server.listen();
});

afterEach(() => server.resetHandlers());

afterAll(() => server.close());

3. Add msw and related to transformIgnorePatterns to transpile msw like this (just the last part):

"node_modules/(?!(?:.pnpm/)?((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.|@expo-google-fonts/.|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|msw|@mswjs|until-async|strict-event-emitter|headers-polyfill|outvariant|is-node-process|@open-draft))"

4. Add the server/handlers code

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

// Provide the server-side API with the request handlers.
export const server = setupServer(...handlers);

That's it, just run test and it works.