🚨

MSW の request.formData() を使うと GitHub Actions でだけテストがコケる

2024/09/01に公開

Problem

タイトルの通り

MSW の handler で request.formData() を読むと、ローカルでは問題なく通るテストが GitHub Actions でだけ Failed to parse body as FormData. のようなエラーが出て困った

以下のような実装

import { http, HttpResponse } from "msw";

export const handlers = [
  http.post("https://exmaple.com/foobar", async ({ request }) => {
    const id = (await request.formData()).get("id");

    return HttpResponse.json({ id });
  }),
];

関連しそうな Issue も立っていたが、未解決なようだったので諦めて workaround することにした

Workaround

request.arrayBuffer() なんかは問題なく使えるわけなので、その multipart/form-data を実直にパースすることにした
パーサは parse-multipart-data を使う

import { http, HttpResponse } from "msw";
import * as multipart from "parse-multipart-data";

export const handlers = [
  http.post("https://exmaple.com/foobar", async ({ request }) => {
    const boundary = multipart.getBoundary(
      request.headers.get("Content-Type") ?? ""
    );
    if (!boundary) {
      throw new Error("Failed getting the boundary");
    }

    const formData = multipart.parse(
      Buffer.from(await request.arrayBuffer()),
      boundary
    );
    const id = formData.find((input) => input.name === "id")?.data.toString();

    return HttpResponse.json({ id });
  }),
];

Discussion