MSW with React Native

Demo app to illustrate issues with MSW

• MSW with React Native
  • Issues
  • Demo app
  • Environment
  • Installed
    • Detox
    • Msw
  • Run
    • Build
    • Metro
    • Test
      • Logging

Issues

Originally this demo app was made for reported issue #1, but while debugging further, more issues seem to exist with handling of the interception and subsequent handling of the defined responses.

1. It seems the server.use definition is added to the stack but is not triggered when a call is intercepted
2. It seems the case where server.resetHandler is used with a new definition, the call is no longer intercepted
3. It seems that handler definition for fake_reactnative.dev/movies.json is not called when the app is loading while it is expected to be used from the moment msw is initialised This is a RN initialisation issue. The msw example in the documentation is incorrect and needs improving.
4. It seems that the handler with the definition once is always called while the expectation is that the 2nd and subsequent calls would trigger the next definition for reactnative.dev/movies.json.

In short: there seem to be issues with the handling of intercepted calls and the processing of the defined responses.

Demo app

The app is based on the React Native Quick starter demo: React Native project. Where a movie list is retrieved. This app has been modified to:

1. Retrieve a fake URL with the [FakeMovies] button
2. Retrieve the real URL with the [GetMovies] button - although the behaviour is controlled by the handlers so the real response should not be shown
3. Reset the list with the [Clear] button - no handler or API call is used here

The handling of the specific fetch in the app is expanded with error messages, to be shown in the list:

1. for !response.ok (e.g. non 2xx) responses
2. and the http.error() response (e.g. no network)

Which can be used to further check the actual behaviour of the defined handler responses.

No special care has been taken in cleaning up or minimising code duplication :-)

Environment

• MB Pro M2-Max
• MacOS 14.3.1
• Emulator iOS v17.0.1

Installed

Detox

Based on detox setup

brew tap wix/brew
brew install applesimutils

yarn add "jest@^29" --dev
yarn add detox --dev
detox init

Msw

Installation according to RN integration

yarn add msw --dev
yarn add fast-text-encoding --dev  
yarn add react-native-url-polyfill --dev

Run

Build

Run the the Detox build first.

detox build -c ios.sim.debug

Metro

Start metro session in terminal

yarn start --reset-cache

Test

Start detox run in seperate terminal

detox test -l trace -c ios.sim.debug starter.test.js 

Logging

Check:

1. metro terminal for logging
2. detox terminal for logging (for additional detox logging, see detox doc.)

Note: removed original included logging from this file as that is no longer representative after the app changes.