React Native: Request not intercepted

[Lisa Weilguni]

Context

We are currently migrating the E2E test suite of a React app from Cypress to Playwright. Both Playwright and msw work perfectly for us. We use MSW also in combination with our Jest test suite, as well as for local manual testing. We would like to intercept and mock network requests that are performed by browsers during Playwright tests. In Cypress we managed to achieve it like this:

    cy.window().then((window) => {
      const {worker, rest} = window.msw;
      worker.use(
        rest.post(`*${api.customEndpoint}`, (_, res, ctx) => {
          const response = cloneDeep(responses.customEndpoint);
          response.days = 5;

          return res(ctx.status(200), ctx.json(response));
        }),
      );
    });

Problem

We tried to achieve the same behavior using playwright-msw, but the requests do not seem to get intercepted. The browser returns the original response that is defined in our msw environment (handlers.ts). We have set up an example React Native app reproducing the fail.

What we tried

1. Install playwright-msw
2. Setup test.ts as suggested in the docs

import {test as base, expect} from '@playwright/test';
import type {MockServiceWorker} from 'playwright-msw';
import {createWorkerFixture} from 'playwright-msw';
import {handlers} from '_mocks/mock-server/handlers';

const test = base.extend<{
  worker: MockServiceWorker;
}>({
  worker: createWorkerFixture(handlers),
});

export {test, expect};

4. Use the extended test implementation within a playwright test

import {expect, test} from '_playwright/support/test';
import {rest} from 'msw';

test('displays correct number of days', async ({
    page,
    worker,
  }) => {

    await worker.use(
      rest.get(`*/api/${api.statistics}`, (_, res, ctx) => {
        const response = cloneDeep(responses.statistics);
        response.days = 5;

        return res(ctx.status(200), ctx.json(response));
      }),
    );

    await page.goto('/');

    await expect(page.getByText('5').toBeVisible();
  });

5. We made sure the target application is not running MSW in the browser (e.g. a local dev server)

What could be the cause of the problem? Thanks in advance for your help!

[Dhruv Jain]

@lisaweilguni did you figure out some solution? it is happening for me as well with a normal react app, the app loads fine in tests but api intercepts don't work

[Lisa Weilguni]

Interesting to hear that you're experiencing the same issue with a normal React App @maddhruv. Unfortunately, we did not find a solution yet. We filed an issue for Playwright as well concerning this. Let us know if you manage to make it work!

[Lisa Weilguni]

We have set up an example React Native app reproducing the issue. Thanks in advance for your help! Feel free to reach out if you're facing a similar issue.

[Marius Tobiassen Bungum]

Did any one of you get this working? We're facing the same issue with a normal vite react app 😞

---

Edit:
Got it working now, it was an error on my end (auth calls weren't handled like I expected)