fix(vitest): strongly type vitest environment options

danielroe · danielroe · commit 37582c715fd8 · 2024-04-17T10:24:05.000+01:00
diff --git a/src/environments/vitest/env/jsdom.ts b/src/environments/vitest/env/jsdom.ts
@@ -1,38 +1,28 @@
 import { importModule } from 'local-pkg'
-import type { EnvironmentNuxt } from '../types'
+import type { DOMWindow, SupportedContentTypes } from 'jsdom'
+import defu from 'defu'
+import type { JSDOMOptions } from 'vitest'
+import type { EnvironmentNuxt, NuxtWindow } from '../types'
 
 export default <EnvironmentNuxt> async function (global, { jsdom = {} }) {
-  const { CookieJar, JSDOM, ResourceLoader, VirtualConsole }
-    = (await importModule('jsdom')) as typeof import('jsdom')
-  const {
-    html = '<!DOCTYPE html>',
-    userAgent,
-    url = 'http://localhost:3000',
-    contentType = 'text/html',
-    pretendToBeVisual = true,
-    includeNodeLocations = false,
-    runScripts = 'dangerously',
-    resources,
-    console = false,
-    cookieJar = false,
-    ...restOptions
-  } = jsdom as any
-  const window = new JSDOM(html, {
-    pretendToBeVisual,
-    resources:
-      resources ?? (userAgent ? new ResourceLoader({ userAgent }) : undefined),
-    runScripts,
-    url,
-    virtualConsole:
-      console && global.console
-        ? new VirtualConsole().sendTo(global.console)
-        : undefined,
-    cookieJar: cookieJar ? new CookieJar() : undefined,
-    includeNodeLocations,
-    contentType,
-    userAgent,
-    ...restOptions,
-  }).window as any
+  const { CookieJar, JSDOM, ResourceLoader, VirtualConsole } = (await importModule('jsdom')) as typeof import('jsdom')
+  const jsdomOptions = defu(jsdom, {
+    html: '<!DOCTYPE html>',
+    url: 'http://localhost:3000',
+    contentType: 'text/html' as const,
+    pretendToBeVisual: true,
+    includeNodeLocations: false,
+    runScripts: 'dangerously',
+    console: false,
+    cookieJar: false,
+  } satisfies JSDOMOptions) as JSDOMOptions & { contentType: SupportedContentTypes }
+
+  const window = new JSDOM(jsdomOptions.html, {
+    ...jsdomOptions,
+    resources: jsdomOptions.resources ?? (jsdomOptions.userAgent ? new ResourceLoader({ userAgent: jsdomOptions.userAgent }) : undefined),
+    virtualConsole: jsdomOptions.console && global.console ? new VirtualConsole().sendTo(global.console) : undefined,
+    cookieJar: jsdomOptions.cookieJar ? new CookieJar() : undefined,
+  }).window as DOMWindow & NuxtWindow
 
   // Vue-router relies on scrollTo being available if run in a browser.
   // The scrollTo implementation from JSDOM throws a "Not Implemented" error
diff --git a/src/environments/vitest/index.ts b/src/environments/vitest/index.ts
@@ -77,14 +77,17 @@ export default <Environment>{
 
     const registry = new Set<string>()
 
-    win.fetch = (init: string, options?: any) => {
+    win.fetch = (init, options) => {
       if (typeof init === 'string') {
         const base = init.split('?')[0]
         if (registry.has(base) || registry.has(init)) {
           init = '/_' + init
         }
       }
-      return localFetch(init, options)
+      return localFetch(init.toString(), {
+        ...options,
+        headers: Array.isArray(options?.headers) ? new Headers(options?.headers) : options?.headers,
+      })
     }
 
     win.$fetch = createFetch({ fetch: win.fetch, Headers: win.Headers })
diff --git a/src/environments/vitest/types.ts b/src/environments/vitest/types.ts
@@ -1,20 +1,23 @@
 import type { App } from 'h3'
+import type { $Fetch } from 'nitropack'
+import type { JSDOMOptions, HappyDOMOptions } from 'vitest'
 
 export type NuxtBuiltinEnvironment = 'happy-dom' | 'jsdom'
 export interface NuxtWindow extends Window {
   __app: App
   __registry: Set<string>
   __NUXT_VITEST_ENVIRONMENT__?: boolean
-  __NUXT__: any
-  $fetch: any
-  fetch: any
-  IntersectionObserver: any
-  Headers: any
+  __NUXT__: Record<string, unknown>
+  $fetch: $Fetch
+  fetch: ((input: RequestInfo | URL, init?: RequestInit | undefined) => Promise<Response>)
+  IntersectionObserver: unknown
+  Headers: typeof Headers
 }
-export type EnvironmentNuxt = (
-  global: any,
-  options: Record<string, any>
-) => Promise<{
+export interface EnvironmentNuxtOptions {
+  jsdom?: JSDOMOptions
+  happyDom?: HappyDOMOptions
+}
+export type EnvironmentNuxt = (global: typeof globalThis, options: EnvironmentNuxtOptions) => Promise<{
   window: NuxtWindow
-  teardown(): void
+  teardown (): void
 }>

Original file line number	Diff line number	Diff line change
`@@ -77,14 +77,17 @@ export default <Environment>{`
`77`	`77`
`78`	`78`	`const registry = new Set<string>()`
`79`	`79`
`80`		`- win.fetch = (init: string, options?: any) => {`
	`80`	`+ win.fetch = (init, options) => {`
`81`	`81`	`if (typeof init === 'string') {`
`82`	`82`	`const base = init.split('?')[0]`
`83`	`83`	`if (registry.has(base) \|\| registry.has(init)) {`
`84`	`84`	`init = '/_' + init`
`85`	`85`	`}`
`86`	`86`	`}`
`87`		`- return localFetch(init, options)`
	`87`	`+ return localFetch(init.toString(), {`
	`88`	`+ ...options,`
	`89`	`+ headers: Array.isArray(options?.headers) ? new Headers(options?.headers) : options?.headers,`
	`90`	`+ })`
`88`	`91`	`}`
`89`	`92`
`90`	`93`	`win.$fetch = createFetch({ fetch: win.fetch, Headers: win.Headers })`