Error with FormData constructor in React + Jest: TypeError: FormData constructor: Argument 1 could not be converted to: undefined.

[oleh-demkovych]

When using this library with React and Jest, I encountered the following error during test execution:

TypeError: FormData constructor: Argument 1 could not be converted to: undefined.

This occurs when trying to create a FormData object from a ref:

const formRef = useRef(null);

// ...

if (formRef.current) {
  const formData = new FormData(formRef.current);
}

<form ref={formRef}>
  ...
</form>

This works fine in the browser or when using testEnvironment: 'jsdom', but in Jest tests it fails.

Steps to Reproduce

1. Use useRef(null) to create a form reference and attach that ref to the form.
2. Attempt to create FormData from formRef.current in a Jest test.

Expected Behavior

FormData should be constructed if formRef.current is a valid form element, or at least the test environment should mimic the browser behavior more closely.

Environment

React version: 19.1.0
Jest version: 29.7.0
Node version: 20.13.1

[oleh-demkovych]

Here is a temporary solution involving the mocking of FormData:

type FormDataEntryValue = string | Blob;

export class FormData {
  private readonly _entries: Map<string, FormDataEntryValue[]>;

  public constructor(form?: HTMLFormElement) {
    this._entries = new Map();

    if (form) {
      const elements = Array.from(form.elements) as HTMLInputElement[];
      for (const element of elements) {
        if (element.name && !element.disabled) {
          const { type, name } = element;
          if (type === 'file') {
            const files = element.files;
            if (files) {
              for (const file of files) {
                this.append(name, file);
              }
            }
          } else if (type === 'checkbox' || type === 'radio') {
            if (element.checked) {
              this.append(name, element.value);
            }
          } else {
            this.append(name, element.value);
          }
        }
      }
    }
  }

  public append(name: string, value: FormDataEntryValue): void {
    const existing = this._entries.get(name) ?? [];
    existing.push(value);
    this._entries.set(name, existing);
  }

  public delete(name: string): void {
    this._entries.delete(name);
  }

  public get(name: string): FormDataEntryValue | null {
    const values = this._entries.get(name);
    return values ? values[0] : null;
  }

  public getAll(name: string): FormDataEntryValue[] {
    return [...(this._entries.get(name) ?? [])];
  }

  public has(name: string): boolean {
    return this._entries.has(name);
  }

  public set(name: string, value: FormDataEntryValue): void {
    this._entries.set(name, [value]);
  }

  public *entries(): IterableIterator<[string, FormDataEntryValue]> {
    for (const [name, values] of this._entries) {
      for (const value of values) {
        yield [name, value];
      }
    }
  }

  public *keys(): IterableIterator<string> {
    for (const [name] of this.entries()) {
      yield name;
    }
  }

  public *values(): IterableIterator<FormDataEntryValue> {
    for (const [, value] of this.entries()) {
      yield value;
    }
  }

  public [Symbol.iterator](): IterableIterator<[string, FormDataEntryValue]> {
    return this.entries();
  }
}

[jlowcs]

See #36 for a fix