Runtime request handlers in the browser (Playwright, Remix)

[oscard0m]

👋🏽 I'm opening the question here but feel free to redirect me to Discord/Issue in mswjs/msw or mswjs/examples.

The Problem

I would like to use runtime handlers in my tests in a SvelteKit project (+ playwright). Trying to import the server and call .use() doesn't seem to work.

I tried with Remix and there seems to be a similar problem.

I pushed a version of mswjs/examples where you can see a reproduction in /with-remix and /with-svelte

mswjs/examples@main...oscard0m:msw-examples:example-runtime-handlers-remix-svelte

Any hint on how can I debug this or... what should be the best approach?

Thank you @kettanaito !

[kettanaito]

Hi, @oscard0m.

If you are in Playwright, you are running tests in the browser. For that, you need to deal with worker, not server.

1. Follow the browser integration to set up MSW in your app.
2. Expose the worker on window (or any other method of your choosing to have it available during the tests).
3. During the test, reference window.worker to add runtime handlers.

test('my test', async ({ page }) => {
  await page.evaluate(() => {
    const { worker, http } = window.msw
    worker.use(http.get('/override', resolver))
  })
})

Note that I'm also exposing http on window to access it in the same context as window.worker.

[oscard0m]

Even if I use Playwright, aren't the requests I want to mock happening on the server?

The use case I have with Svelte is:

• When I go to /blog/{slug} I get the corresponding blog post content from the CMS. In +page.server is whete I fetch the API.
• It gets even more complex if I use prerender = true. This means the content is fetch at build time.

[kettanaito]

If you want to control how server-side requests behave from the browser test, you are looking at #1617, which is a rather uncharted territory everywhere right now. Your best bet as of now is to put conditional behaviors as a part of server.use() with something like this: https://mswjs.io/docs/best-practices/dynamic-mock-scenarios. Then, in tests, trigger those conditions (likely via the request URL).

[oscard0m]

If you want to control how server-side requests behave from the browser test, you are looking at #1617, which is a rather uncharted territory everywhere right now. Your best bet as of now is to put conditional behaviors as a part of server.use() with something like this: https://mswjs.io/docs/best-practices/dynamic-mock-scenarios. Then, in tests, trigger those conditions (likely via the request URL).

This is the answer I was looking for. Thanks Artem! I will take a look at that GitHub issue you shared. The approach you suggest is what we are already doing at work. We set a custom header, we read it in the handler of MSW node server and read the corresponding file with the mocked response. I wanted to find an alternative a but more handy.

Thanks for the detailed answer!