Install to Vue3

[1010real]

Hi, I'd like to use msw mock response in playwright test on vue3-vite project.

This is a simple vue3-vite project installed msw, playwright and playwright-msw by me. But I coludn't get it done. https://github.com/1010real/vue3-vite-playwright-msw

And I created another one based react-vite project and I could get it done. Below is that. https://github.com/1010real/react-vite-playwright-msw

Is there a difference step to install between react and vue3 ?

[valendres]

Hey @1010real, thanks for raising this issue. Admittedly, I'm not familiar with vue3, so I don't have any ideas off the top of my head why the library isn't behaving as desired, but I'll do some debugging with your example repos to try and figure out what's going on.

I really appreciate you creating the example repos, it's going to make this issue a lot easier to look into!

[valendres]

@1010real I managed to figure out what's going on 🎉

It seems there's a race condition with the onload event being fired and the API call being made. In https://github.com/valendres/playwright-msw/pull/47, a change was made so that playwright-msw would not attempt to intercept API calls until this event was fired, with the goal of preventing the interception of the initial HTTP call (the one that should return HTML). While this seemed to solve the issue in React, it likely broke Vue compatibility 😞

I've made a change in https://github.com/valendres/playwright-msw/pull/61 which solves the Vue compatibility issue. I've added an example-vue app to make sure it's working.

If you'd like to fix this issue without waiting for this PR to be merged and released, you can opt out of the page load detection by setting waitForPageLoad to false within your test.ts:

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

[1010real]

@valendres I am so happy you are the maintainer of this tool 🎉

I could use msw mock on playwright at vue with waitForPageLoad: false option. So I use playwright-msw in my project from now on! And I'm waiting for release of https://github.com/valendres/playwright-msw/pull/61

Thanks so much!!

[valendres]

playwright-msw@2.2.1 has been released with these changes 🎉