MSW listen() doesn't work on Expo React Native app

[fregayeg]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 14 or higher

Node.js version

v16.17.0

Reproduction repository

https://github.com/fregayeg/optional-proj

Reproduction steps

1. Run yarn install
2. Run expo start -c and wait the web server to be ready.
3. Once server is up, open navigator on http://localhost:19002
4. Scan QR code on device or on Android/iOS if you have Android studio or xCode installed.
5. The app must be running under Expo Go in your device or emulator.
6. Once its ready, it must be open.

Current behavior

Actually, following your examples and discussion about React Native support, I've made a sample app, that must call and endpoint through something called redux-toolkit query (equivalent to React Query, Apollo etc...). The behavior is: When I open the app I get my main screen (ui) as expected: a bottom tab navigator with exactly 2 sub-screens. When I go the 2nd screen where the API call is, I get nothing and no errors are printed out on console.

Expected behavior

When I open the app I get my 1st screen (ui) as expected: a bottom tab navigator with exactly 2 sub-screens. If I tap on 2nd tab, I go to the screen where the api call is, and then I must see a loading indicator then a list of items must appear instead, without errors.

[fregayeg]

Hi again! after many tried, I've figured out a way to make it work! 😆 I appreciate the way how you made msw work for RN apps tbh. Thus, I close this issue as it doesn't have any sense as it I know now.

You can see my answer on Expo Forum, where I asked same a similar question 😄 .

Thanks for you attention. 🙏

[mwood23]

@fregayeg I can't thank you enough for this. MSW would silently fail and thought I was going crazy over here.

[kettanaito]

Okay, so the silently failing part is definitely not fine.

I think MSW should check if the global URL construct exists and if it's not, throw an exception with suggestion steps to use a polyfill.

The fact that you need to use msw/node is referenced in the docs, I believe, but we need to create a standalone "Integration > React Native" page (looking forward to this in the next docs).

Is there anything else I'm missing?

[kettanaito]

If anybody could give #1520 a review, I'd be thankful. Let's improve the experience around React Native polyfills.

[fregayeg]

Hello @kettanaito ! Thank you for this good job! I didn't see the updates sincel last week sorry. Could you please tell me if I should do something else ?

[fregayeg]

Ok maybe I'm late. In order to help people understand what is the minimal setup to run React Native with MSW, I recommend to use Expo, it makes the task straighforward and pretty simple.

I suggest to visit my expo-msw sample , its linked to my personal github.

thanks all

[kettanaito]

Released: v1.0.0 🎉

This has been released in v1.0.0!

• 📄 Release notes
• 📦 npm package

Make sure to always update to the latest version (npm i msw@latest) to get the newest features and bug fixes.

---

Predictable release automation by @ossjs/release.