This repository introduces cases of integration between Remix v2 and MSW, contrasting with the original examples based on Remix v1 from mswjs/examples.

Mock Service Worker usage example with Remix.

Remix automatically watches the ./app directory for changes. If you want for your changes to API mocks to be picked up by Remix's dev server, place the ./mocks directory in the ./app.

mkdir ./app/mocks

If you don't wish or otherwise can't do this, modify remix.config.js appropriately to also watch the directory with your mocks.

npx msw init ./public

touch mocks/browser.ts

See mocks/browser.ts module for reference.

• entry.client.tsx create a prepareApp and defer the rendering.
• tsconfig.json set the module to esnext to support dynamic import() statements.

touch mocks/node.ts

Unlike regular Node.js integrations, we will have to write a bit of custom setup logic so that Remix could digest the changes we make to our handlers while developing the app.

• See mocks/node.ts for the server-side setup.

In entry.server.tsx, import the handlers.ts and enable mocking by calling server.listen() from the node.ts setup.