Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Native: server.use does not add request handlers #2042

Open
4 tasks done
RayOei opened this issue Feb 16, 2024 · 4 comments
Open
4 tasks done

React Native: server.use does not add request handlers #2042

RayOei opened this issue Feb 16, 2024 · 4 comments
Labels
bug Something isn't working help wanted Extra attention is needed needs:triage Issues that have not been investigated yet. scope:react-native

Comments

@RayOei
Copy link

RayOei commented Feb 16, 2024

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

@RayOei RayOei added bug Something isn't working needs:triage Issues that have not been investigated yet. scope:node Related to MSW running in Node labels Feb 16, 2024
@nemmtor
Copy link

nemmtor commented Feb 28, 2024

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

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

@kettanaito kettanaito changed the title server.use not used in RN ReactNative: server.use does not add request handlers Mar 21, 2024
@kettanaito kettanaito added the help wanted Extra attention is needed label Mar 21, 2024
@kettanaito kettanaito changed the title ReactNative: server.use does not add request handlers React Native: server.use does not add request handlers Mar 21, 2024
@kettanaito kettanaito added scope:react-native and removed scope:node Related to MSW running in Node labels Mar 21, 2024
@andrew-tv
Copy link

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.
index js — MSW-test 2024-04-10 18-21-10

@JamesBream
Copy link

@RayOei @andrew-tv Did either of you manage to find a workaround for this? I'm also seeing the same behaviour with the latest versions of MSW + Detox with a React Native app. Initial handlers work just fine but attempting to add handlers as part of a test seem to be ignored.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed needs:triage Issues that have not been investigated yet. scope:react-native
Projects
None yet
Development

No branches or pull requests

5 participants