fix(jsdom): support URL.createObjectURL, FormData.set(prop, blob) (#8935)

Author: sheremet-va

.github/actions/setup-and-cache/action.yml

@@ -4,7 +4,7 @@ inputs:
   node-version:
     required: false
     description: Node version for setup-node
-    default: 20.x
+    default: 24.x
 
 runs:
   using: composite

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

@@ -135,6 +135,7 @@ const LIVING_KEYS = [
   'Plugin',
   'MimeType',
   'FileReader',
+  'FormData',
   'Blob',
   'File',
   'FileList',
@@ -184,7 +185,6 @@ const LIVING_KEYS = [
   // 'AbortSignal',
   // 'URL',
   // 'URLSearchParams',
-  // 'FormData',
 ]
 
 const OTHER_KEYS = [

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

@@ -1,6 +1,7 @@
 import type { DOMWindow } from 'jsdom'
 import type { Environment } from '../../types/environment'
 import type { JSDOMOptions } from '../../types/jsdom-options'
+import { URL as NodeURL } from 'node:url'
 import { populateGlobal } from './utils'
 
 function catchWindowErrors(window: DOMWindow) {
@@ -35,14 +36,18 @@ function catchWindowErrors(window: DOMWindow) {
   }
 }
 
-let _FormData!: typeof FormData
+let NodeFormData_!: typeof FormData
+let NodeBlob_!: typeof Blob
+let NodeRequest_!: typeof Request
 
 export default <Environment>{
   name: 'jsdom',
   viteEnvironment: 'client',
   async setupVM({ jsdom = {} }) {
     // delay initialization because it takes ~1s
-    _FormData = globalThis.FormData
+    NodeFormData_ = globalThis.FormData
+    NodeBlob_ = globalThis.Blob
+    NodeRequest_ = globalThis.Request
 
     const { CookieJar, JSDOM, ResourceLoader, VirtualConsole } = await import(
       'jsdom',
@@ -82,12 +87,15 @@ export default <Environment>{
 
     const clearWindowErrors = catchWindowErrors(dom.window)
 
+    const utils = createCompatUtils(dom.window)
+
     // 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)
+    dom.window.Request = createCompatRequest(utils)
+    dom.window.URL = createJSDOMCompatURL(utils)
 
-    // inject web globals if they missing in JSDOM but otherwise available in Nodejs
+    // inject web globals if they are missing in JSDOM but otherwise available in Nodejs
     // https://nodejs.org/dist/latest/docs/api/globals.html
     const globalNames = [
       'structuredClone',
@@ -111,13 +119,14 @@ export default <Environment>{
     // we also should override other APIs they use
     const overrideGlobals = [
       'fetch',
-      'Request',
       'Response',
       'Headers',
       'AbortController',
       'AbortSignal',
-      'URL',
       'URLSearchParams',
+      // URL and Request is overriden with a compat one
+      // 'URL',
+      // 'Request',
     ] as const
     for (const name of overrideGlobals) {
       const value = globalThis[name]
@@ -140,7 +149,9 @@ export default <Environment>{
   },
   async setup(global, { jsdom = {} }) {
     // delay initialization because it takes ~1s
-    _FormData = globalThis.FormData
+    NodeFormData_ = globalThis.FormData
+    NodeBlob_ = globalThis.Blob
+    NodeRequest_ = globalThis.Request
 
     const { CookieJar, JSDOM, ResourceLoader, VirtualConsole } = await import(
       'jsdom',
@@ -183,9 +194,11 @@ export default <Environment>{
     })
 
     const clearWindowErrors = catchWindowErrors(global)
+    const utils = createCompatUtils(dom.window)
 
     global.jsdom = dom
-    global.FormData = createFormData(dom.window)
+    global.Request = createCompatRequest(utils)
+    global.URL = createJSDOMCompatURL(utils)
 
     return {
       teardown(global) {
@@ -200,26 +213,71 @@ 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
+function createCompatRequest(utils: CompatUtils) {
+  return class Request extends NodeRequest_ {
+    constructor(...args: [input: RequestInfo, init?: RequestInit]) {
+      const [input, init] = args
+      if (init?.body != null) {
+        const compatInit = { ...init }
+        if (init.body instanceof utils.window.Blob) {
+          compatInit.body = utils.makeCompatBlob(init.body as any) as any
+        }
+        if (init.body instanceof utils.window.FormData) {
+          compatInit.body = utils.makeCompatFormData(init.body)
+        }
+        super(input, compatInit)
+      }
+      else {
+        super(...args)
+      }
+    }
   }
+}
+
+function createJSDOMCompatURL(utils: CompatUtils): typeof URL {
+  return class URL extends NodeURL {
+    static createObjectURL(blob: any): string {
+      if (blob instanceof utils.window.Blob) {
+        const compatBlob = utils.makeCompatBlob(blob)
+        return NodeURL.createObjectURL(compatBlob as any)
+      }
+      return NodeURL.createObjectURL(blob)
+    }
+  } as typeof URL
+}
 
-  return class FormData extends _FormData {
-    constructor(...args: any[]) {
-      super()
-      const formData = new JSDOMFormData(...args)
+interface CompatUtils {
+  window: DOMWindow
+  makeCompatBlob: (blob: Blob) => Blob
+  makeCompatFormData: (formData: FormData) => FormData
+}
+
+function createCompatUtils(window: DOMWindow): CompatUtils {
+  // this returns a hidden Symbol(impl)
+  // this is cursed, and jsdom should just implement fetch API itself
+  const implSymbol = Object.getOwnPropertySymbols(
+    Object.getOwnPropertyDescriptors(new window.Blob()),
+  )[0]
+  const utils = {
+    window,
+    makeCompatFormData(formData: FormData) {
+      const nodeFormData = new NodeFormData_()
       formData.forEach((value, key) => {
-        this.append(key, value)
+        if (value instanceof window.Blob) {
+          nodeFormData.append(key, utils.makeCompatBlob(value as any) as any)
+        }
+        else {
+          nodeFormData.append(key, value)
+        }
       })
-    }
+      return nodeFormData
+    },
+    makeCompatBlob(blob: Blob) {
+      const buffer = (blob as any)[implSymbol]._buffer
+      return new NodeBlob_([buffer], { type: blob.type })
+    },
   }
+  return utils
 }
 
 function patchAddEventListener(window: DOMWindow) {

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

@@ -40,6 +40,16 @@ test('Fetch API accepts other APIs', async () => {
   expect.soft(() => new Request('http://localhost', { method: 'POST', body: searchParams })).not.toThrowError()
 })
 
+test('fetch api doesnt override the init object', () => {
+  const body = new FormData()
+  const init: RequestInit = {
+    method: 'post',
+    body,
+  }
+  const _request = new Request('http://localhost', init)
+  expect(init.body).toBe(body)
+})
+
 describe('FormData', () => {
   test('can pass down a simple form data', async () => {
     const formData = new FormData()
@@ -142,6 +152,32 @@ describe('FormData', () => {
       expect(error).toEqual(expectedError)
     }
   })
+
+  test('supports Blob', () => {
+    const form = new FormData()
+    const key = 'prop'
+
+    const data = new Blob()
+
+    form.set(key, data)
+
+    const retrievedBlob = form.get(key)
+
+    expect(retrievedBlob).toBeInstanceOf(Blob)
+  })
+
+  test('supports File', () => {
+    const form = new FormData()
+    const key = 'prop'
+
+    const data = new File([], 'name')
+
+    form.set(key, data)
+
+    const retrievedBlob = form.get(key)
+
+    expect(retrievedBlob).toBeInstanceOf(File)
+  })
 })
 
 test('DOM APIs accept AbortController', () => {
@@ -234,6 +270,15 @@ test('request doesn\'t support absolute URL because jsdom doesn\'t provide compa
   }).toThrow(/Failed to parse URL/)
 })
 
+test('URL.createObjectUrl works properly', () => {
+  expect(() => {
+    URL.createObjectURL(new Blob())
+  }).not.toThrow()
+  expect(() => {
+    URL.createObjectURL(new File([], 'name.js'))
+  }).not.toThrow()
+})
+
 test('jsdom global is exposed', () => {
   // @ts-expect-error -- jsdom is not exposed in our types because we use a single tsconfig for all
   const dom = jsdom