Experimental test mode does not work with new versions of MSW

[gabezeck]

Link to the code that reproduces this issue

https://github.com/gabezeck/next-playwright-testmode-msw

To Reproduce

1. Run npm run test from the root of the repo
2. This should run the only test file, which is here.
3. This ends up triggering an error when hitting this portion of the testmode code:

   next.js/packages/next/src/experimental/testmode/playwright/msw.ts

   Line 50 in 2417bf9

   const mockedRequest = new MockedRequest(new URL(request.url), {

It results in a "TypeError: _msw.MockedRequest is not a constructor" error, which occurs because MockedRequest is no longer a constructor in MSW > 2.0.

Current vs. Expected behavior

The current behavior results in the tests failing with the error outlined above. I would expect the testmode code to be updated to correctly create mocked requests based upon the current version of the package.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:59:33 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T8112
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.0-canary.23 // Latest available version is detected (14.2.0-canary.23).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

No response

[shirakaba]

Next.js pins MSW to v1.3.0 (see package.json). Really hope they can update it, as it's been stuck on that version since September 8th, 2023 and MSW v2 is way nicer.

[wyozi]

I've been using the following modified version. It works nice except some POST intercepts seem to fail with "Cannot construct a Request with a Request object that has already been used" :/

// version of https://github.com/vercel/next.js/blob/74f99c9a03bd9be4d422ce443529df6f00945cf5/packages/next/src/experimental/testmode/playwright/msw.ts
// except compatible with msw 2

import { handleRequest, type RequestHandler } from "msw";
import type { NextFixture } from "next/experimental/testmode/playwright";
import {
  test as base,
  defineConfig,
} from "next/experimental/testmode/playwright";
// eslint-disable-next-line import/no-extraneous-dependencies
import { Emitter } from "strict-event-emitter";

// eslint-disable-next-line import/no-extraneous-dependencies
export * from "msw";
// eslint-disable-next-line import/no-extraneous-dependencies
export * from "@playwright/test";
export { defineConfig };
export type { NextFixture };

export interface MswFixture {
  use: (...handlers: RequestHandler[]) => void;
}

export const test = base.extend<{
  msw: MswFixture;
  mswHandlers: RequestHandler[];
}>({
  mswHandlers: [[], { option: true }],

  msw: [
    async ({ next, mswHandlers }, use) => {
      const handlers: RequestHandler[] = [...mswHandlers];
      const emitter = new Emitter();

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

        const requestId = Math.random().toString(16);
        await handleRequest(
          request,
          requestId,
          handlers.slice(0),
          {
            onUnhandledRequest: () => {
              isUnhandled = true;
            },
          },
          emitter as any,
          {
            onPassthroughResponse: () => {
              isPassthrough = true;
            },
            onMockedResponse: (r) => {
              mockedResponse = r;
            },
          }
        );
        
        if (isPassthrough) {
          return "continue";
        }
        if (isUnhandled) {
          return undefined;
        }

        if (mockedResponse) {
          return mockedResponse;
        }

        return "abort";
      });

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

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

export default test;

[yxasika]

Next.js pins MSW to v1.3.0 (see package.json). Really hope they can update it, as it's been stuck on that version since September 8th, 2023 and MSW v2 is way nicer.

Good point. I think the Readme right now is quite confusing. It should be updated by the pinned down version for now:

At

next.js/packages/next/src/experimental/testmode/playwright/README.md

Line 28 in 59ce87e

npm install -D msw

To:
npm install -D msw@1

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.