Use MSW in same process as cypress

[knoefel]

First of all thank you for this great tool for creating e2e tests!!!

My setup is the following:

• remix with msw.js
• Managing mocks with a mswjs/data factory
• cypress 10

What i want is to be able to initialise, update or reset the mock factory from within the cypress tests. So for example to test this use case:

User navigates to a list, then adds an item to that list, afterwards the list should contain that item. After the test i want to reset the mock factory to have a clean state for the next test.

The problem is that msw and mswjs/data run in a different process than cypress, so i can't use the factory methods. I tried to run msw within cypress but get an error that it can't be executed within a browser environment. As i need to mock remix server code with msw i need to use msw's setupServer instead of setupWorker (for the browser api mocking).

Any ideas how i can get this to work? Any tip would be awesome as i'm really stuck right now.

Thanks in advance!!!

[singhAmandeep007]

@knoefel

I have prepared a React + Vite boilerplate which includes integration of MSW with Vitest and Cypress.

This allows to easily test an application with mocked responses.
With mocked response you can easily simulate a success scenario as well as failure scenario, thus covering most of user stories.

What's included ?
✅ Automatic reset
✅ Isolation
✅ Logging
✅ Fully Type safe
✅ With middleware

Repo
MSW + Cypress
MSW + Vitest

Please give it a ⭐️ if it helped.