fix(jsdom): pass down Node.js FormData to Request (#8880)

Author: sheremet-va

packages/vitest/src/integrations/env/happy-dom.ts

@@ -74,6 +74,7 @@ export default <Environment>{
         'AbortSignal',
         'URL',
         'URLSearchParams',
+        'FormData',
       ],
     })
 

packages/vitest/src/integrations/env/jsdom-keys.ts

@@ -141,7 +141,6 @@ const LIVING_KEYS = [
   'ValidityState',
   'DOMParser',
   'XMLSerializer',
-  'FormData',
   'XMLHttpRequestEventTarget',
   'XMLHttpRequestUpload',
   'XMLHttpRequest',
@@ -185,6 +184,7 @@ const LIVING_KEYS = [
   // 'AbortSignal',
   // 'URL',
   // 'URLSearchParams',
+  // 'FormData',
 ]
 
 const OTHER_KEYS = [

packages/vitest/src/integrations/env/jsdom.ts

@@ -34,10 +34,15 @@ function catchWindowErrors(window: DOMWindow) {
   }
 }
 
+let _FormData!: typeof FormData
+
 export default <Environment>{
   name: 'jsdom',
   viteEnvironment: 'client',
   async setupVM({ jsdom = {} }) {
+    // delay initialization because it takes ~1s
+    _FormData = globalThis.FormData
+
     const { CookieJar, JSDOM, ResourceLoader, VirtualConsole } = await import(
       'jsdom',
     )
@@ -79,6 +84,7 @@ export default <Environment>{
     // TODO: browser doesn't expose Buffer, but a lot of dependencies use it
     dom.window.Buffer = Buffer
     dom.window.jsdom = dom
+    dom.window.FormData = createFormData(dom.window)
 
     // inject web globals if they missing in JSDOM but otherwise available in Nodejs
     // https://nodejs.org/dist/latest/docs/api/globals.html
@@ -132,6 +138,9 @@ export default <Environment>{
     }
   },
   async setup(global, { jsdom = {} }) {
+    // delay initialization because it takes ~1s
+    _FormData = globalThis.FormData
+
     const { CookieJar, JSDOM, ResourceLoader, VirtualConsole } = await import(
       'jsdom',
     )
@@ -175,6 +184,7 @@ export default <Environment>{
     const clearWindowErrors = catchWindowErrors(global)
 
     global.jsdom = dom
+    global.FormData = createFormData(dom.window)
 
     return {
       teardown(global) {
@@ -189,6 +199,28 @@ export default <Environment>{
   },
 }
 
+// Node.js 24 has a global FormData that Request accepts
+// FormData is not used anywhere else in JSDOM, so we can safely
+// override it with Node.js implementation, but keep the DOM behaviour
+// this is required because Request (and other fetch API)
+// are not implemented by JSDOM
+function createFormData(window: DOMWindow) {
+  const JSDOMFormData = window.FormData
+  if (!_FormData) {
+    return JSDOMFormData
+  }
+
+  return class FormData extends _FormData {
+    constructor(...args: any[]) {
+      super()
+      const formData = new JSDOMFormData(...args)
+      formData.forEach((value, key) => {
+        this.append(key, value)
+      })
+    }
+  }
+}
+
 function patchAddEventListener(window: DOMWindow) {
   const JSDOMAbortSignal = window.AbortSignal
   const JSDOMAbortController = window.AbortController

test/core/test/environments/happy-dom.spec.ts

@@ -26,3 +26,16 @@ test('request doesn\'t fail when using absolute url because it supports it', ()
     const _r = new Request('/api', { method: 'GET' })
   }).not.toThrow()
 })
+
+test('can pass down a simple form data', async () => {
+  const formData = new FormData()
+  formData.set('hello', 'world')
+
+  await expect((async () => {
+    const req = new Request('http://localhost:3000/', {
+      method: 'POST',
+      body: formData,
+    })
+    await req.formData()
+  })()).resolves.not.toThrowError()
+})

test/core/test/environments/jsdom.spec.ts

@@ -2,7 +2,7 @@
 
 import { stripVTControlCharacters } from 'node:util'
 import { processError } from '@vitest/utils/error'
-import { expect, test, vi } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 
 test('MessageChannel and MessagePort are available', () => {
   expect(MessageChannel).toBeDefined()
@@ -22,7 +22,7 @@ test('fetch, Request, Response, and BroadcastChannel are available', () => {
   expect(BroadcastChannel).toBeDefined()
 })
 
-test('Fetch API accepts other APIs', () => {
+test('Fetch API accepts other APIs', async () => {
   expect.soft(() => new Request('http://localhost', { signal: new AbortController().signal })).not.toThrowError()
   expect.soft(() => new Request('http://localhost', { method: 'POST', body: new FormData() })).not.toThrowError()
   expect.soft(() => new Request('http://localhost', { method: 'POST', body: new Blob() })).not.toThrowError()
@@ -40,6 +40,110 @@ test('Fetch API accepts other APIs', () => {
   expect.soft(() => new Request('http://localhost', { method: 'POST', body: searchParams })).not.toThrowError()
 })
 
+describe('FormData', () => {
+  test('can pass down a simple form data', async () => {
+    const formData = new FormData()
+    formData.set('hello', 'world')
+
+    await expect((async () => {
+      const req = new Request('http://localhost:3000/', {
+        method: 'POST',
+        body: formData,
+      })
+      await req.formData()
+    })()).resolves.not.toThrowError()
+  })
+
+  test('can pass down form data from a FORM element', async () => {
+    const form = document.createElement('form')
+    document.body.append(form)
+
+    const hello = document.createElement('input')
+    hello.value = 'world'
+    hello.type = 'text'
+    hello.name = 'hello'
+    form.append(hello)
+
+    const formData = new FormData(form)
+    expect([...formData.entries()]).toEqual([
+      ['hello', 'world'],
+    ])
+
+    await expect((async () => {
+      const req = new Request('http://localhost:3000/', {
+        method: 'POST',
+        body: formData,
+      })
+      await req.formData()
+    })()).resolves.not.toThrowError()
+  })
+
+  test('can pass down form data from a FORM element with a submitter', async () => {
+    const form = document.createElement('form')
+    document.body.append(form)
+
+    const hello = document.createElement('input')
+    hello.value = 'world'
+    hello.type = 'text'
+    hello.name = 'hello'
+    form.append(hello)
+
+    const submitter = document.createElement('button')
+    submitter.type = 'submit'
+    submitter.name = 'include'
+    submitter.value = 'submitter'
+    form.append(submitter)
+
+    const formData = new FormData(form, submitter)
+    expect([...formData.entries()]).toEqual([
+      ['hello', 'world'],
+      ['include', 'submitter'],
+    ])
+
+    await expect((async () => {
+      const req = new Request('http://localhost:3000/', {
+        method: 'POST',
+        body: formData,
+      })
+      await req.formData()
+    })()).resolves.not.toThrowError()
+  })
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData#exceptions
+  test('cannot pass down form data from a FORM element with a non-sumbit sumbitter', async () => {
+    const form = document.createElement('form')
+    document.body.append(form)
+    const submitter = document.createElement('button')
+    submitter.type = 'button'
+    form.append(submitter)
+
+    expect(() => new FormData(form, submitter)).toThrowError(
+      new TypeError('The specified element is not a submit button'),
+    )
+  })
+
+  test('cannot pass down form data from a FORM element with a sumbitter from a wrong form', async () => {
+    const form1 = document.createElement('form')
+    const form2 = document.createElement('form')
+    document.body.append(form1, form2)
+    const submitter = document.createElement('button')
+    submitter.type = 'submit'
+    form2.append(submitter)
+
+    try {
+      // can't use toThrow here because DOMException is not an Error
+      const _ = new FormData(form1, submitter)
+    }
+    catch (error: any) {
+      const expectedError = new DOMException(
+        'The specified element is not owned by this form element',
+        'NotFoundError',
+      )
+      expect(error).toEqual(expectedError)
+    }
+  })
+})
+
 test('DOM APIs accept AbortController', () => {
   const element = document.createElement('div')
   document.body.append(element)