Closed1ヶ月前にクローズ2

Next.js の Experimental test mode for Playwright で MSW を使用した際に発生するエラーを解消する

Next.js

Playwright

MSW

Kotaro

Playwright で Experimental test mode for Playwright の README を参考に MSW を使用したテストを走らせると、TypeError: mswHandlers is not iterable というエラーが発生してテストが通らない。

エラーが発生するテストの例：

import { test } from "next/experimental/testmode/playwright/msw";
import { expect } from "@playwright/test";
import { HttpResponse, http, delay } from "msw";

test.use({
  mswHandlers: [
    http.get("http://localhost:3000/api/foo", () =>
      HttpResponse.json({
        text: "foo",
      }),
    ),
    http.get("http://localhost:3000/api/bar", async () => {
      delay(1000);
      return HttpResponse.json({
        text: "bar",
      });
    }),
  ]
});

test("テスト", async ({ page, msw }) => {
  // ...
});

Kotaro

以下のドキュメントに記載の通りだが、Fixtures のオプションの値が配列の場合は、追加の配列にラップする必要がある。

test.use({
-  mswHandlers: [
+  mswHandlers: [[
    http.get("http://localhost:3000/api/foo", () =>
      HttpResponse.json({
        text: "foo",
      }),
    ),
    http.get("http://localhost:3000/api/bar", async () => {
      delay(1000);
      return HttpResponse.json({
        text: "bar",
      });
    }),
-  ]
+  ]]
});

ただし、これだと TypeScript を使用している場合型エラーが発生するので、自分は以下のようにしている。

test.use({
  mswHandlers: async ({}, use) => {
    await use([
      http.get("http://localhost:3000/api/foo", () =>
        HttpResponse.json({
          text: "foo",
        }),
      ),
      http.get("http://localhost:3000/api/bar", async () => {
        delay(1000);
        return HttpResponse.json({
          text: "bar",
        });
      }),
    ]);
  },
});

参考：

このスクラップは1ヶ月前にクローズされました