Zodios for MSW

[koichik]

As you probably know, MSW is a widely used API mocking library.

It would be really nice if we could build a type-safe MSW handler from Zodios API definitions.
I thought about creating one myself, but I don't understand the Zodios code at all yet, so I'll just make a proposal.
It would probably be very similar to @zodios/express.

Just an image:

import { setupWorker } from 'msw'
import { zodiosMock } from "@zodios/msw";
import { userApi } from "../../common/api";

const rest = zodiosMock(userApi);

export const handlers = [
  //  auto-complete path  fully typed and validated input params (body, query, path, header)
  //          ▼           ▼    ▼    ▼
  rest.get('/user/:id', (req, res, ctx) => {
    // ctx.json is typed thanks to zod
    return res(ctx.json({
      //                   auto-complete
      //                            ▼
      id: req.url.searchParams.get('id'),
      name: "John Doe",
    }))
  })

export const worker = setupWorker(...handlers)

What do you think?

[ecyrbe]

one issue for typing MSW, is that ctx.status call is decorrelated from ctx.json.
So you would not be able to have the same magic that @zodios/express has.

I however i encourage you to try implement it, it could be a good way to learn Typescript advanced typing techniques.

I would not implement it myself, as i have limited ressources and time. As i do all this on my spare time.

[koichik]

Thanks for your advice, I'll try it!

[ka2jun8]

I did it thanks to zodios.types.

https://github.com/ka2jun8/zodios-msw/blob/main/src/rest/msw/wrapper.ts

[ecyrbe]

Really cool.