mswjs/msw

React Native: server.use does not add request handlers

Open

#2042 opened on Feb 16, 2024

View on GitHub
 (5 comments) (2 reactions) (0 assignees)TypeScript (13,302 stars) (422 forks)batch import
bughelp wantedneeds:triagescope:react-native

Description

Prerequisites

Environment check

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

Node.js version

21.6.2

Reproduction repository

https://github.com/RayOei/MSW-test/tree/main

Reproduction steps

The repo contains a simple RN app (RN v0.73.4) with Detox (v20.18.1) tests which illustrates the expectations.

For details see the README.md in the repo.

Edit: some additional observations have been added regarding handling of intercepted requests. Also the demo app has been tweaked to help show more clearly what the behaviour is

Current behavior

The first test using the global handler passes: request is intercepted and expected response is send & received. The test which defines the server.use fails, however, as the normal handler is executed instead of this particular one.

Logging show the intercept log:

2024-02-16 15:20:37.417 I msw_test[96707:1937f8] [com.wix.Detox:WebSocket] Action received: invoke 2024-02-16 15:20:37.463 Df msw_test[96707:1937f8] [com.apple.UIKit:EventDispatch] Sending UIEvent type: 0; subtype: 0; to windows: 1 2024-02-16 15:20:37.464 Df msw_test[96707:1937f8] [com.apple.UIKit:EventDispatch] Sending UIEvent type: 0; subtype: 0; to window: <UIWindow: 0x10640b380>; contextId: 0xF0CCE053 2024-02-16 15:20:37.464 A msw_test[96707:1937f8] (UIKitCore) send gesture actions 2024-02-16 15:20:37.481 Df msw_test[96707:1937f8] [com.apple.UIKit:EventDispatch] Sending UIEvent type: 0; subtype: 0; to windows: 1 2024-02-16 15:20:37.481 Df msw_test[96707:1937f8] [com.apple.UIKit:EventDispatch] Sending UIEvent type: 0; subtype: 0; to window: <UIWindow: 0x10640b380>; contextId: 0xF0CCE053 2024-02-16 15:20:37.481 A msw_test[96707:1937f8] (UIKitCore) send gesture actions 2024-02-16 15:20:37.487 I msw_test[96707:193cad] [com.facebook.react.log:javascript] 'Outgoing:', 'GET', 'https://reactnative.dev/movies.json' 2024-02-16 15:20:37.507 I msw_test[96707:193cad] [com.facebook.react.log:javascript] ......Starting APP...... 2024-02-16 15:20:37.514 I msw_test[96707:193cad] [com.facebook.react.log:javascript] ......Starting APP....... 2024-02-16 15:20:37.888 I msw_test[96707:1937f8] [com.wix.Detox:WebSocket] Action received: invoke

Edit: I noticed that the listHandlers() does show an added HttpHandler but it is not used (or skipped)? Before the ---- the predefined set. After the set including the HttpHandler added by server.use.

12:37:20.560 detox[59647] i [ HttpHandler { info: { header: '/.+/ http://localhost:8081/symbolicate', path: 'http://localhost:8081/symbolicate', method: /.+/, callFrame: '/msw_test/e2e/mocks/handlers.js:4:8' }, isUsed: false, resolver: [Function (anonymous)], resolverGenerator: undefined, resolverGeneratorResult: undefined, options: {} }, HttpHandler { info: { header: 'GET https://reactnative.dev/movies.json', path: 'https://reactnative.dev/movies.json', method: 'GET', callFrame: '/msw_test/e2e/mocks/handlers.js:9:8' }, isUsed: false, resolver: [Function (anonymous)], resolverGenerator: undefined, resolverGeneratorResult: undefined, options: {} } ] 12:37:20.564 detox[59647] i ------------------------------------------------------------- 12:37:20.565 detox[59647] i [ HttpHandler { info: { header: 'GET https://reactnative.dev/movies.json', path: 'https://reactnative.dev/movies.json', method: 'GET', callFrame: '/msw_test/e2e/starter.test.js:44:12' }, isUsed: false, resolver: [Function (anonymous)], resolverGenerator: undefined, resolverGeneratorResult: undefined, options: {} }, HttpHandler { info: { header: '/.+/ http://localhost:8081/symbolicate', path: 'http://localhost:8081/symbolicate', method: /.+/, callFrame: '/msw_test/e2e/mocks/handlers.js:4:8' }, isUsed: false, resolver: [Function (anonymous)], resolverGenerator: undefined, resolverGeneratorResult: undefined, options: {} }, HttpHandler { info: { header: 'GET https://reactnative.dev/movies.json', path: 'https://reactnative.dev/movies.json', method: 'GET', callFrame: '/msw_test/e2e/mocks/handlers.js:9:8' }, isUsed: false, resolver: [Function (anonymous)], resolverGenerator: undefined, resolverGeneratorResult: undefined, options: {} } ]

Expected behavior

Expected that [Refresh -> should have Use_Movie_fake_4 last => THIS ONE FAILS] test would pass with request intercepted with the server.use as defined in the test with the appropriate response. This followed the information provided in https://mswjs.io/docs/best-practices/structuring-handlers

Contributor guide

Tech stack
typescriptreact nativenodejs
Domain
apitestingmobile
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
MSW basicsReact NativeDetoxTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
Investigate the `server.use` method in MSW's Node.js/React Native handler registration. Examine the handler matching logic in `src/node/setupServer` to understand why manually added handlers are not being used. Compare the handler list before and after `server.use` from the logs in the issue. Check if there is any filtering or condition that causes the new handler to be skipped.