Use msw v2.x with next/experimental/testmode/playwright.

[uzimaru0000]

Goals

msw's v2.x contains breaking changes and is not compatible with v1.x.
Since testmode/playwright/msw depends on v1.3.0, handlers that have already been implemented in v2.x cannot be used.
I would like to make these usable.

Non-Goals

No response

Background

If the msw already included in the project for use in unit tests etc. is v2, using handlers implemented with it results in an error: TypeError: _msw.MockedRequest is not a constructor.
This seems to be an error caused by using MockedRequest, which is an API from v1.x, in v2.x.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.1.0: Mon Aug 29 20:11:49 PDT 2022; root:xnu-8792.40.74.0.1~20/RELEASE_ARM64_T6000
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: N/A
  pnpm: 8.10.5
Relevant packages:
  next: 14.0.4
  msw: 2.0.8

Proposal

By creating a fixture as follows, I was able to support v2 as well.

import { type RequestHandler, handleRequest, LifeCycleEventsMap } from 'msw'
import { test as base } from 'next/experimental/testmode/playwright'
import { Emitter } from 'strict-event-emitter'

export type MswFixture = {
  use: (...handlers: RequestHandler[]) => void
}
export const e2eTest = base.extend<{
  msw: MswFixture
  mswHandlers: RequestHandler[]
}>({
  mswHandlers: [[], { option: true }],
  msw: [
    async ({ next, mswHandlers }, use) => {
      const handlers: RequestHandler[] = [...mswHandlers]
      const emitter = new Emitter<LifeCycleEventsMap>()

      next.onFetch(async (request) => {
        let isUnhandled = false
        let isPassthrough = false
        let mockedResponse: Response | null = null

        await handleRequest(
          request,
          Math.random().toString(16).slice(2),
          handlers,
          {
            onUnhandledRequest: () => {
              isUnhandled = true
            },
          },
          emitter,
          {
            onPassthroughResponse: () => {
              isPassthrough = true
            },
            onMockedResponse: (r) => {
              mockedResponse = r
            },
          },
        )

        if (isUnhandled) {
          return undefined
        }
        if (isPassthrough) {
          return 'continue'
        }
        if (mockedResponse) {
          return mockedResponse
        }

        return 'abort'
      })

      await use({
        use: (...newHandlers) => {
          handlers.unshift(...newHandlers)
        },
      })

      handlers.length = 0
    },
    { auto: true },
  ],
})