Usage with Remix and Playwright

[kirillkurko]

I'm looking for a good example of using MSW with Remix and Playwright. There are some examples on the internet like this one, but what I'm looking for is the usage of server.use(...) inside my tests. The problem that I'm facing is that while handlers are prepended (verified using server.printHandlers()), override is not working.

[kettanaito]

Hey, @kirillkurko. Take a look at our Official Remix + Playwright + MSW usage example.

Using the runtime handlers (worker.use()) is a matter of exposing worker on window and accessing it in page.evaluate() in your Playwright tests.

[kettanaito]

Can you tell me more about what you're trying to do?

Using Playwright implies running in the browser, and the way to use MSW in the browser is via the setupWorker API. I may be missing the point of what you're trying to achieve, would like to learn more.

[kettanaito]

Note that the example I linked features both client-side and server-side API mocking in Remix at the same time. You cannot use server.use() in Playwright tests because your app and your test are running in two separate processes. I'm playing around with a solution for this in #1617, which is going to be huge. Until then, you cannot have test-based server-side API mocks with MSW, just as you can't have them in general at the moment.

[kirillkurko]

Thanks for the reply, you actually answered my question and worker is a way to go for me. "setupRemoteServer" API looks really interesting, but it's definitely a huge milestone

[pauloricardos]

hey @kettanaito this page Official Remix + Playwright + MSW seems broken

[kettanaito]

@pauloricardos, thanks for letting me know! So GitHub repo redirects do have an EOL. Fixed the link, it leads to the correct example now.