request.formData() fails with vitest and file

[haakonph]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Node.js version

v22.2.0

Reproduction repository

https://github.com/haakonph/msw-examples

Reproduction steps

alter the example to use a request with a file: (as in the example repo)

 const formData = new FormData();
  const file = new File(['some file'], 'filnavn.xml');
  formData.append('fil', file)

in the with-vitest exmple,
run npm i
and run the 'fetches the user info' test

you need to add a file to the request to get it to fail
if you run with npm v20.0.0 it works with jsdom but not without.

it works with jest-jsdom.

Current behavior

with vitest-jsdom it time out waiting to get the request
with vitest without vitestjsdom you get a 500 response.

Expected behavior

get a 200 response as you get with examples/with-jest-jsdom example

[kettanaito]

Hi, @haakonph. Thanks for reporting this.

I will take a look once I have a minute but generally we have a stance that Jest issues are not addressed. If I am able to reproduce this in raw Node.js or with Vitest, then I will consider this a bug. If this is only reproducible for Jest/JSDOM, I will close this as wont-fix.

[greysteil]

@haakonph I ran into this today, too, but was able to solve it with the polyfill instructions. In case it helps, my jest.config.js looks like the below and everything is working as expected.

const nextJest = require('next/jest') // eslint-disable-line @typescript-eslint/no-var-requires

const createJestConfig = nextJest({ dir: './' })

const { TextDecoder, TextEncoder } = require('node:util')
const { fetch, Headers, FormData, Request, Response } = require('undici')

const customJestConfig = {
  // Indicates which files should be considered as tests
  testRegex: "(/src/__tests__/.*|(\\.|/)(test|spec))\\.(ts|tsx)?$",
  testPathIgnorePatterns: ["/src/__tests__/.*/mocks/", "/src/__tests__/config/*"],

  testEnvironment: "jest-environment-jsdom",
  testEnvironmentOptions: {
    // Opt-out from JSDOM using browser-style resolution for dependencies as JSDOM is not a browser
    customExportConditions: [""],
  },

  setupFilesAfterEnv: ["./src/__tests__/config/setupTests.ts"],
  globals: {
    fetch,
    Request,
    Response,
    Headers,
    FormData,
    ReadableStream,
    TextEncoder,
    TextDecoder,
  },
};

module.exports = createJestConfig(customJestConfig);

[haakonph]

@kettanaito Hi, sorry i was a bit to fast with my copy pasting.

The issue is with vitest and when the body contains a file. I oppdated the issue.

I am not able to reproduce it without vitest.
So feel free to close the issue.

[topaxi]

We are also running into this issue with msw, we are also running in an environment that loads jsdom, so this might be an interplay between msw, jsdom and a newer undici version?

Any Node.js version after v20.12.2 breaks our tests that rely on request.formData().

As a workaround we are currently pinned to Node.js v20.12.2.

[jukkahyv]

Same problem here. Node v20.14.0, msw 2.3.1, vitest. Downgraded node to 20.12.2, and now it works again.