Documentation missing on how to integrate with Expo App Router

[joao-arau-symphony]

As of today, The React Native integration documentation recommends delaying application initialization until the mocks are loaded like so:

enableMocking().then(() => {
  AppRegistry.registerComponent(appName, () => App)
})

However when using Expo App router the entry point of the application is internal to the library and not available to freely configure.

For apps using App Router, Expo recommends placing initialization code in the RootLayout file instead, but it would be helpful if there is an official recommendation from MSW on how avoid potential race conditions related to app initialization.

[sargentieri]

Do you have a working example of MSW with expo by chance?

[uroge]

index.js file is where you set the entry for expo-router.
Instead of importing "expo-router/entry" you could set the entry point manually, and ensure that mocking is enabled:

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

export const App = () => {
  const ctx = require.context('./src/app');

  return <ExpoRoot context={ctx} />;
};

async function enableMocking() {
  if (!__DEV__) {
    return;
  }

  await import('./msw.polyfills');
  const { server } = await import('./src/server');

  server.listen();
}

enableMocking().then(() => {
  registerRootComponent(App);
});

[dpk-baba]

@uroge

index.js file is where you set the entry for expo-router. Instead of importing "expo-router/entry" you could set the entry point manually, and ensure that mocking is enabled:

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

export const App = () => {
  const ctx = require.context('./src/app');

  return <ExpoRoot context={ctx} />;
};

async function enableMocking() {
  if (!__DEV__) {
    return;
  }

  await import('./msw.polyfills');
  const { server } = await import('./src/server');

  server.listen();
}

enableMocking().then(() => {
  registerRootComponent(App);
});

This is not working for me. I get the following error:

ERROR Invariant Violation: "main" has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

This is my package.json file where I have set the entry point:

"name": "myreactapp",
  "main": "index.js",
  "version": "1.0.0",

And this is my index.js file:

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

export const App = () => {
  const ctx = require.context("./app");

  return <ExpoRoot context={ctx} />;
};

async function enableMocking() {
  if (!__DEV__) {
    return;
  }

  await import("./msw.polyfills");
  const { server } = await import("@/mocks/server");

  server.listen();
}

enableMocking().then(() => {
  registerRootComponent(App);
});

I am using file based routing and my app directory is in the root directory:

What am I missing here?

[Maren-Osnabrug]

Not sure if this will fix everything for you but I found this answer very helpful to get my implementation up and running 😄
So I also have the change you have in the package.json and then in the index.js:

// import all polyfills 
import "fast-text-encoding";
import "react-native-url-polyfill/auto";
// that's probably what you have in `msw.polyfills.js`

// end with the entry from Expo Router
import "expo-router/entry";

I can then call server.listen() in my root layout file. Hope it helps!

[vonkanehoffen]

Trying to get this working myself and not having much luck. I tried all suggestions above & from the current docs.
I always get:

ReferenceError: Property 'Document' doesn't exist

when MSW tries to mock a request, so I dunno if it's missing some polyfill somewhere?

I made a minimal reproduction here:

https://github.com/vonkanehoffen/msw-minimal

Same story when I:

• try the registerRootComponent method - vonkanehoffen/msw-minimal@c590823
• or apply the recommended polyfills before expo-router/entry and start server.listen() in the root _layout - vonkanehoffen/msw-minimal@797761a

Any ideas @kettanaito or anyone? Presume I'm doing something wrong but no idea what 😬

[rodperottoni]

Trying to get this working myself and not having much luck. I tried all suggestions above & from the current docs. I always get:

ReferenceError: Property 'Document' doesn't exist

when MSW tries to mock a request, so I dunno if it's missing some polyfill somewhere?

I made a minimal reproduction here:

https://github.com/vonkanehoffen/msw-minimal

Same story when I:

• try the registerRootComponent method - vonkanehoffen/msw-minimal@c590823
• or apply the recommended polyfills before expo-router/entry and start server.listen() in the root _layout - vonkanehoffen/msw-minimal@797761a

Any ideas @kettanaito or anyone? Presume I'm doing something wrong but no idea what 😬

hey mate, I'm facing the same issues here. I have created a discussion up at the MSW repo: mswjs/msw#2359

[kettanaito]

I would love to help here but I have literally zero clue as to how Expo works. Someone with experience has to step in and champion this support.

We don't generally feature integrations for particular tools because MSW aims at environment support. In case of React native, that is most likely a Node.js environment (with oddities). What I mean by that, the fact that you need a proper place to defer your app's rendering isn't MSW's concern, it's Expo's concern (as well as giving you a clear entrypoint to configure). I find any recommendations like this hurting more than helping in the long run.

The best way forward is a functioning example. I tried setting one up with Expo in https://github.com/mswjs/examples, but the basic hello world Expo app fails to build in a PNPM monorepo.

What's next?

1. Open a pull request to https://github.com/mswjs/examples, adding with-expo example. See existing examples for the feature set they must have (run locally, have at least one test, have .github/workflows automation configured).
2. Ping me in the review. I will get to it as fast as I can to unblock people. I won't be able to review Expo setup itself, so there's where more eyes's the better.
3. Hopefully, we merge it for everyone to reference.
4. Then I include a link to the with-expo repo in the React native integration in the docs, making the example discoverable for everyone.

[kettanaito]

Getting the example is one thing, but we also need someone to maintain it. If there's a volunteer, I will do all in my power for you to feel at home at MSW ❤️ There's no reason for Expo folks not to have the library working there.

[dpkbaba]

Getting the example is one thing, but we also need someone to maintain it. If there's a volunteer, I will do all in my power for you to feel at home at MSW ❤️ There's no reason for Expo folks not to have the library working there.

@kettanaito I'd be happy to support this. How do we get started?

[SpaghettiC0des]

I copied the contents of expo-router/entry and modified it like this.

//NOTE: This is used the "main" entry point set in the package.json, the default value is "expo-router/entry" but we want to setup MSW mocking so we need to override this.

// `@expo/metro-runtime` MUST be the first import to ensure Fast Refresh works
// on web.
import '@expo/metro-runtime';

import { App } from 'expo-router/build/qualified-entry';
import { renderRootComponent } from 'expo-router/build/renderRootComponent';

async function enableMocking() {
  if (!__DEV__) {
    return;
  }
  const { server } = await import('./testing/mocks/native');
  server.listen();
}

// This file should only import and register the root. No components or exports
// should be added here.
enableMocking().then(() => renderRootComponent(App));

Then update your package.json

"main": "src/main.ts",

Or whatever you named your entry point file.

Edit: testing/mocks/native already imports the msw.polyfill

[debitan]

I copied the contents of expo-router/entry and modified it like this.

//NOTE: This is used the "main" entry point set in the package.json, the default value is "expo-router/entry" but we want to setup MSW mocking so we need to override this.

// @expo/metro-runtime MUST be the first import to ensure Fast Refresh works
// on web.
import '@expo/metro-runtime';

import { App } from 'expo-router/build/qualified-entry';
import { renderRootComponent } from 'expo-router/build/renderRootComponent';

async function enableMocking() {
if (!DEV) {
return;
}
const { server } = await import('./testing/mocks/native');
server.listen();
}

// This file should only import and register the root. No components or exports
// should be added here.
enableMocking().then(() => renderRootComponent(App));
Then update your package.json

"main": "src/main.ts",

Or whatever you named your entry point file.

Edit: testing/mocks/native already imports the msw.polyfill

When I try this I get these errors in the console:

[React] [ReferenceError: Property 'MessageEvent' doesn't exist]
 ERROR  [ReferenceError: Property 'MessageEvent' doesn't exist]

Code: server.ts
> 1 | import { setupServer } from "msw/native";
    | ^
  2 | import { handlers } from "./handlers";
  3 |
  4 | export const server = setupServer(...handlers);
Call Stack
  <global> (mocks/server.ts:1)
[React] [Error: Uncaught (in promise, id: 0) TypeError: Cannot read property 'listen' of undefined]
 ERROR  [Error: Uncaught (in promise, id: 0) TypeError: Cannot read property 'listen' of undefined]

Code: index.ts
  14 |   }
  15 |   const { server } = await import("./mocks/server");
> 16 |   server.listen({
     |                ^
  17 |     onUnhandledRequest(request, print) {
  18 |       // TODO: ignore certain requests like telemetry
  19 |       if (
Call Stack
  enableMocking (index.ts:16:16)

And App entry not found in the simulator

My index.ts code is:

// `@expo/metro-runtime` MUST be the first import to ensure Fast Refresh works
// on web.
import "@expo/metro-runtime";
import { App } from "expo-router/build/qualified-entry";
import { renderRootComponent } from "expo-router/build/renderRootComponent";
import Constant from "expo-constants";
import "./unistyles";
import "fast-text-encoding";
import "react-native-url-polyfill/auto";

async function enableMocking() {
  if (Constant.expoConfig?.extra?.appVariant !== "e2e-test") {
    return;
  }
  const { server } = await import("./mocks/server");
  server.listen({
    onUnhandledRequest(request, print) {
      // TODO: ignore certain requests like telemetry
      if (
        request.url.includes("symbolicate") ||
        request.url.includes("dc.services.visualstudio")
      ) {
        return;
      }
      return print.warning();
    },
  });
}

// This file should only import and register the root. No components or exports
// should be added here.
enableMocking().then(() => {
  renderRootComponent(App);
});