React Native: server.use does not add request handlers

[RayOei]

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 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

[nemmtor]

In the failing test can you try to await 0ms timeout?

I am having same issue in react app and wondering if this is something similar, for me doing await for 0ms worked:

export const wait = (ms: number) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

  it('shows error if api failed', async () => {
    server.use(
      http.get('/donation-settings', () => {
        return HttpResponse.json({}, { status: 404 });
      }),
    );
    await wait(0);

    const contentText = 'Content';
    render(
      <Container>
        {({ currentSettings }) => (
          <div>
            {contentText}
            {JSON.stringify(currentSettings)}
          </div>
        )}
      </Container>,
    );

    const error = await screen.findByTestId('error');
    const content = screen.queryByText(contentText);

    expect(error).toBeVisible();
    expect(content).not.toBeInTheDocument();
  });

without waiting it fails

[andrew-tv]

The await doesn't help me in the RN app described by @RayOei

[andrew-tv]

I can't say that this is a problem, but I noticed that the initial array of handlers is processed by the init() function (see code in screenshot). However, a handler added with use() is not processed in this way. They are only added to the beginning of the handlers array and that's all.