React Native: Request not intercepted
lisaweilguni opened this issue · comments
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
- Install playwright-msw
- 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};
- 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();
});
- 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!
@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
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.
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)