Question: Does this library mock API calls?

[JoshAwaze]

Hi, I'm trying to use v3 of this library in a sveltekit application and I can't seem to get any requests to be mocked. I've followed the guide by creating a mock worker fixture and using that test fixture within my tests.

So I'm wondering does this library mock API calls or is just for page calls?

For added context I am using sveltekit and wish to mock external API calls that happen from the sveltekit server

[Peter Weller]

Hey @JoshAwaze,

Thanks for reaching out with your question. Unfortunately, I haven't had the opportunity to work with SvelteKit yet, so my knowledge on its details is very limited.

Regarding the library, its primary function is to mock REST & GraphQL API calls that are executed at runtime in the browser. These are the calls you typically see in the network tab of Chrome's DevTools. It achieves this by mapping the MSWpaths to Playwright routes, allowing them to be intercepted using Playwright's page.route functionality. This mechanism effectively bridges the gap between the browser and the host environment orchestrating the tests.

From your description, it sounds like there might be server-side rendering (SSR) at play, which could imply that the API calls you're trying to mock aren't actually happening during the browser's runtime. If that's the case, playwright-msw might not be able to intercept these calls as it's designed for client-side interactions.

To better understand the issue, could you confirm if these API calls are being made during SSR or client-side execution? This would help me understand the problem a bit better. Additionally, if it's feasible in your test environment, you might consider temporarily disabling SSR to see if that allows the API calls to occur client-side, where playwright-msw can intercept them.

If you could share some more details or code snippets about how and when these API calls are made in your SvelteKit application, that would be really helpful for further troubleshooting.

[JoshAwaze]

Thanks for the reply @valendres and giving more information on the inner workings of the library :)

Unfortunately I can't share code snippets of my application but hopefully I can get some time to create a minimal dummy application.

The answer to your question about it being browser or SSR call is both aha although most are called from +page.server.ts (SSR calls)

https://kit.svelte.dev/docs/load

// +page.ts
export const load = async () => {
 fetch(...)
}

Edit:

I've managed to achieve SSR mocking by injecting MSW into server.hooks.ts however it doesn't enable a way for me to change the API calls during the tests e.g. create a handler in the test which makes a failure API call.

Then I've stumbled onto an article on how this can be achieved in Next.js with playwright + msw. https://dev.to/kuroski/writing-integration-tests-for-nextjs-next-auth-prisma-using-playwright-and-msw-388m

I haven't tried to implement this yet...

[JoshAwaze]

With your answer about the primary objective of this library for being browser based network call mocking I can call this question answered and I'm willing to close this issue 👍