Error: Uncaught [TypeError: FormData constructor: Argument 1 could not be converted to: undefined.]?

[Abdulmajeed98]

After upgrading from v1 to v2 and adding the proper jest.polyfills.js as it is mentioned here.

Now I am getting a different error when I run my jest test cases, which is this one
Error: Uncaught [TypeError: FormData constructor: Argument 1 could not be converted to: undefined.].

Any help on this issue?
I couldn't find a similar problem from issues or FAQ of the website.

[mattcosta7]

@Abdulmajeed98 can you make a small reproduction of the issue? this would help with diagnosing the issue

[Abdulmajeed98]

@mattcosta7 I couldn't reproduce the same error inside a new repository I have tried so many times but it is not reproducible.
So I stopped upgrading to v2 until some other time.

[Abdulmajeed98]

I'm getting the same error message when trying to submit a change event like in the following code using @testinglibrary.

const input = within(form).getByLabelText('Go To', { selector: 'input' });

fireEvent.change(input, { target: { value: '2' } });
await screen.findByDisplayValue('2');

fireEvent.submit(input);

So are you able to find its solution?

Here is my polyfill.js:

/**
 * @note The block below contains polyfills for Node.js globals
 * required for Jest to function when running JSDOM tests.
 * These HAVE to be require's and HAVE to be in this exact
 * order, since "undici" depends on the "TextEncoder" global API.
 *
 * Consider migrating to a more modern test runner if
 * you don't want to deal with this.
 */

const { TextDecoder, TextEncoder } = require("node:util")
const { ReadableStream } = require("node:stream/web")

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
  ReadableStream: { value: ReadableStream },
})

const { Blob, File } = require("node:buffer")
const { fetch, Headers, FormData, Request, Response } = require("undici")

Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Blob: { value: Blob },
  File: { value: File },
  Headers: { value: Headers },
  FormData: { value: FormData },
  Request: { value: Request },
  Response: { value: Response },
})

[mattersonline]

No, I was unable to find a solution either. We already added a polyfills file and included the ReadableStream in it although, it's slightly different from yours.

// eslint is turned off for this file as a hack to enable
// overriding certain globals within the jsdom testing environment.

/**
 * @note The block below contains polyfills for Node.js globals
 * required for Jest to function when running JSDOM tests.
 * These HAVE to be require's and HAVE to be in this exact
 * order, since "undici" depends on the "TextEncoder" global API.
 *
 * Consider migrating to a more modern test runner if
 * you don't want to deal with this.
 */

const {
	TextDecoder: _TextDecoder,
	TextEncoder: _TextEncoder,
	ReadableStream: _ReadableStream,
} = require('node:util');

Object.defineProperties(globalThis, {
	TextDecoder: { value: _TextDecoder },
	TextEncoder: { value: _TextEncoder },
	ReadableStream: { value: _ReadableStream },
});

const { Blob: _Blob, File: _File } = require('node:buffer');
const {
	fetch: _fetch,
	Headers: _Headers,
	FormData: _FormData,
	Request: _Request,
	Response: _Response,
} = require('undici');

Object.defineProperties(globalThis, {
	fetch: { value: _fetch, writable: true },
	Blob: { value: _Blob },
	File: { value: _File },
	Headers: { value: _Headers },
	FormData: { value: _FormData },
	Request: { value: _Request },
	Response: { value: _Response },
});

[mattersonline]

@mattcosta7 Just wanted to bump this for a contributor

[mattcosta7]

@mattersonline if you can create a reproduction of the issue I'm happy to look into it when I get a moment, but there's not much I can look into without a reproduction

[emipallares]

I was able to sort that out by removing FormData from the polyfill:

const { TextDecoder, TextEncoder } = require('node:util');

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
});

const { Blob, File } = require('node:buffer');
const { fetch, Headers, Request, Response } = require('undici');

Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Blob: { value: Blob },
  File: { value: File },
  Headers: { value: Headers },
  Request: { value: Request },
  Response: { value: Response },
});