Is/How is vitest polyfilling fetch for jsdom?

[dwjohnston]

JSDOM doesn't implement fetch. (See: jsdom/jsdom#3379)

Yet, I have a simple React application + vitest with a config of:

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './tests/setup.js',
  },

})

And fetch appears to exist. If we console log it, we see:

[AsyncFunction: fetch]

I'm curious - how is this functionality occuring? Is vitest providing a modified jsdom?

For context, jest doesn't do any automatic polyfilling of fetch in JSDOM, so MSW have provided a jest-fixed-jsdom environment that does.

[dwjohnston]

Short answer is yes.

See the logic here:

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

Lines 78 to 99 in 372a2c2

	// inject web globals if they missing in JSDOM but otherwise available in Nodejs
	// https://nodejs.org/dist/latest/docs/api/globals.html
	const globalNames = [
	'structuredClone',
	'fetch',
	'Request',
	'Response',
	'BroadcastChannel',
	'MessageChannel',
	'MessagePort',
	'TextEncoder',
	'TextDecoder',
	] as const
	for (const name of globalNames) {
	const value = globalThis[name]
	if (
	typeof value !== 'undefined'
	&& typeof dom.window[name] === 'undefined'
	) {
	dom.window[name] = value
	}
	}

Can I suggest that the documentation should be updated to reflect this?