feat!: option to replace happy-dom with jsdom (#121)

BREAKING CHANGE: you now need to explicitly add `happy-dom` or `jsdom` as a dev dependency based on which `domEnvironment` you want to be in. (`happy-dom` is set by default.)
danielroe · Jul 5, 2023 · f14361f · f14361f
1 parent c1bdb1f
commit f14361f
Show file tree

Hide file tree

Showing 10 changed files with 359 additions and 103 deletions.
diff --git a/README.md b/README.md
@@ -18,11 +18,11 @@
 1. First install `nuxt-vitest`:
 
 ```bash
-pnpm add -D nuxt-vitest vitest
+pnpm add -D nuxt-vitest vitest happy-dom
 
 # or
-yarn add --dev nuxt-vitest vitest
-npm i -D nuxt-vitest vitest
+yarn add --dev nuxt-vitest vitest happy-dom
+npm i -D nuxt-vitest vitest happy-dom
 ```
 
 2. Add `nuxt-vitest` to your `nuxt.config.js`:

diff --git a/packages/nuxt-vitest/src/config.ts b/packages/nuxt-vitest/src/config.ts
@@ -174,6 +174,14 @@ declare module 'vitest' {
        * @default {nuxt-test}
        */
       rootId?: string
+      /**
+       * The name of the DOM environment to use.
+       * 
+       * It also needs to be installed as a dev dependency in your project.
+       * 
+       * @default {happy-dom}
+       */
+      domEnvironment?: 'happy-dom' | 'jsdom'
     }
   }
 }
diff --git a/packages/vitest-environment-nuxt/package.json b/packages/vitest-environment-nuxt/package.json
@@ -49,17 +49,29 @@
     "defu": "^6.1.2",
     "estree-walker": "^3.0.3",
     "h3": "^1.6.5",
-    "happy-dom": "^9.10.9",
     "magic-string": "^0.30.0",
     "ofetch": "^1.0.0",
     "unenv": "^1.0.2"
   },
   "devDependencies": {
+    "@types/jsdom": "^21.1.1",
+    "happy-dom": "^9.10.9",
+    "jsdom": "^22.0.0",
     "vue": "3.3.4"
   },
   "peerDependencies": {
+    "happy-dom": "^9.10.9",
+    "jsdom": "^22.0.0",
     "vitest": "^0.24.5 || ^0.26.0 || ^0.27.0 || ^0.28.0 || ^0.29.0 || ^0.30.0",
     "vue": "^3.2.45",
     "vue-router": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "happy-dom": {
+      "optional": true
+    },
+    "jsdom": {
+      "optional": true
+    }
   }
 }
diff --git a/packages/vitest-environment-nuxt/src/env/happy-dom.ts b/packages/vitest-environment-nuxt/src/env/happy-dom.ts
@@ -0,0 +1,14 @@
+import { importModule } from 'local-pkg'
+import { EnvironmentNuxt } from '../types'
+
+export default <EnvironmentNuxt> async function (_, { happyDom = {} }) {
+  const { Window, GlobalWindow } = await importModule('happy-dom') as typeof import('happy-dom')
+  const window = new (GlobalWindow || Window)(happyDom) as any
+
+  return {
+    window,
+    teardown() {
+      window.happyDOM.cancelAsync()
+    }
+  }
+} 
diff --git a/packages/vitest-environment-nuxt/src/env/jsdom.ts b/packages/vitest-environment-nuxt/src/env/jsdom.ts
@@ -0,0 +1,44 @@
+import { importModule } from 'local-pkg'
+import { EnvironmentNuxt } 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
+
+  return {
+    window,
+    teardown() {}
+  }
+} 
diff --git a/packages/vitest-environment-nuxt/src/index.ts b/packages/vitest-environment-nuxt/src/index.ts
@@ -1,21 +1,34 @@
 import type { Environment } from 'vitest'
-import { Window, GlobalWindow } from 'happy-dom'
 import { createFetch } from 'ofetch'
 import { joinURL } from 'ufo'
 import { createApp, toNodeListener } from 'h3'
-import type { App } from 'h3'
 import { populateGlobal } from 'vitest/environments'
 import {
   createCall,
   createFetch as createLocalFetch,
 } from 'unenv/runtime/fetch/index'
+import type { NuxtBuiltinEnvironment } from './types'
+import happyDom from './env/happy-dom'
+import jsdom from './env/jsdom'
 
 export default <Environment>{
   name: 'nuxt',
-  async setup(_, environmentOptions) {
-    const startingURL = environmentOptions.url || joinURL('http://localhost:3000', environmentOptions?.nuxtRuntimeConfig.app?.baseURL || '/')
-
-    const win: NuxtWindow = new (GlobalWindow || Window)({ url: startingURL }) as any
+  async setup(global, environmentOptions) {
+    const url = joinURL('http://localhost:3000', environmentOptions?.nuxtRuntimeConfig.app?.baseURL || '/')
+    const { window: win, teardown } = await {
+      'happy-dom': happyDom,
+      jsdom
+    }[environmentOptions.nuxt.domEnvironment as NuxtBuiltinEnvironment || 'happy-dom'](global, {
+      ...environmentOptions,
+      happyDom: {
+        url,
+        ...environmentOptions?.happyDom,
+      },
+      jsdom: {
+        url,
+        ...environmentOptions?.jsdom,
+      }
+    })
 
     win.__NUXT__ = {
       serverRendered: false,
@@ -56,7 +69,7 @@ export default <Environment>{
       return localFetch(init, options)
     }
 
-    win.$fetch = createFetch({ fetch: win.fetch, Headers: win.Headers as any })
+    win.$fetch = createFetch({ fetch: win.fetch, Headers: win.Headers })
 
     win.__registry = registry
     win.__app = h3App
@@ -71,21 +84,10 @@ export default <Environment>{
     return {
       // called after all tests with this env have been run
       teardown() {
-        win.happyDOM.cancelAsync()
-        // @ts-expect-error
+        teardown()
         keys.forEach(key => delete global[key])
-        // @ts-expect-error
         originals.forEach((v, k) => (global[k] = v))
       },
     }
   },
 }
-
-interface NuxtWindow extends Window {
-  __app: App
-  __registry: Set<string>
-  __NUXT__: any
-  $fetch: any
-  fetch: any
-  IntersectionObserver: any
-}
diff --git a/packages/vitest-environment-nuxt/src/types.ts b/packages/vitest-environment-nuxt/src/types.ts
@@ -0,0 +1,16 @@
+import { App } from "h3"
+
+export type NuxtBuiltinEnvironment = 'happy-dom' | 'jsdom'
+export interface NuxtWindow extends Window {
+  __app: App
+  __registry: Set<string>
+  __NUXT__: any
+  $fetch: any
+  fetch: any
+  IntersectionObserver: any
+  Headers: any
+}
+export type EnvironmentNuxt = (global: any, options: Record<string, any>) => Promise<{ 
+  window: NuxtWindow, 
+  teardown(): void
+}>
diff --git a/playground/package.json b/playground/package.json
@@ -9,12 +9,16 @@
     "test:dev": "NUXT_VITEST_DEV_TEST=true nuxt dev",
     "test:unit": "vitest",
     "test:types": "nuxi prepare && vue-tsc --noEmit",
-    "test": "pnpm test:unit --run && pnpm test:dev && pnpm test:types"
+    "test:jsdom": "VITEST_DOM_ENV=jsdom pnpm test:unit --run",
+    "test:happy-dom": "VITEST_DOM_ENV=happy-dom pnpm test:unit --run",
+    "test": "pnpm test:happy-dom && pnpm test:jsdom && pnpm test:dev && pnpm test:types"
   },
   "devDependencies": {
     "@nuxt/devtools": "0.6.6",
     "nuxt": "3.6.1",
     "nuxt-vitest": "0.8.7",
+    "happy-dom": "^9.10.9",
+    "jsdom": "^22.0.0",
     "typescript": "5.1.6",
     "vitest": "0.30.1",
     "vitest-environment-nuxt": "0.8.7",

diff --git a/playground/vitest.config.ts b/playground/vitest.config.ts
@@ -10,6 +10,7 @@ export default defineVitestConfig({
     environmentOptions: {
       nuxt: {
         rootDir: fileURLToPath(new URL('./', import.meta.url)),
+        domEnvironment: process.env.VITEST_DOM_ENV as 'happy-dom' | 'jsdom'
       },
     },
   },