feat(vitest): add Vite plugin for Svelte browser import and autocleanup

Author: mcous

package.json

@@ -14,6 +14,10 @@
     },
     "./vitest": {
       "default": "./src/vitest.js"
+    },
+    "./vite-plugin": {
+      "types": "./src/vite-plugin.d.ts",
+      "default": "./src/vite-plugin.js"
     }
   },
   "type": "module",

src/__tests__/_vitest-setup.js

@@ -1,2 +1 @@
 import '@testing-library/jest-dom/vitest'
-import '../vitest'

src/vite-plugin.js

@@ -0,0 +1,71 @@
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+/**
+ * Vite plugin to configure @testing-library/svelte.
+ *
+ * Ensures Svelte is imported correctly in tests
+ * and that the DOM is cleaned up after each test.
+ *
+ * @param {{resolveBrowser?: boolean, autoCleanup?: boolean}} options
+ * @returns {import('vite').Plugin}
+ */
+export const svelteTesting = ({
+  resolveBrowser = true,
+  autoCleanup = true,
+} = {}) => ({
+  name: 'vite-plugin-svelte-testing-library',
+  config: (config) => {
+    if (!process.env.VITEST) {
+      return
+    }
+
+    if (resolveBrowser) {
+      addBrowserCondition(config)
+    }
+
+    if (autoCleanup) {
+      addAutoCleanup(config)
+    }
+  },
+})
+
+/**
+ * Add `browser` to `resolve.conditions` before `node`.
+ *
+ * This ensures that Svelte's browser code is used in tests,
+ * rather than its SSR code.
+ *
+ * @param {import('vitest/config').UserConfig} config
+ */
+const addBrowserCondition = (config) => {
+  const resolve = config.resolve ?? {}
+  const conditions = resolve.conditions ?? []
+  const nodeConditionIndex = conditions.indexOf('node')
+  const browserConditionIndex = conditions.indexOf('browser')
+
+  if (
+    nodeConditionIndex >= 0 &&
+    (nodeConditionIndex < browserConditionIndex || browserConditionIndex < 0)
+  ) {
+    conditions.splice(nodeConditionIndex, 0, 'browser')
+  }
+
+  resolve.conditions = conditions
+  config.resolve = resolve
+}
+
+/**
+ * Add auto-cleanup file to Vitest's setup files.
+ *
+ * @param {import('vitest/config').UserConfig} config
+ */
+const addAutoCleanup = (config) => {
+  const test = config.test ?? {}
+  const setupFiles = test.setupFiles ?? []
+
+  setupFiles.push(join(dirname(fileURLToPath(import.meta.url)), './vitest.js'))
+
+  test.setupFiles = setupFiles
+  config.test = test
+}

types/vite-plugin.d.ts

@@ -0,0 +1,12 @@
+import type { Plugin } from 'vite'
+
+/**
+ * Vite plugin to configure @testing-library/svelte.
+ *
+ * Ensures Svelte is imported correctly in tests
+ * and that the DOM is cleaned up after each test.
+ */
+export function svelteTesting(options?: {
+  resolveBrowser?: boolean
+  autoCleanup?: boolean
+}): Plugin

vite.config.js

@@ -4,6 +4,8 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 import { defineConfig } from 'vite'
 
+import { svelteTesting } from './src/vite-plugin.js'
+
 const IS_SVELTE_5 = SVELTE_VERSION >= '5'
 
 const alias = [
@@ -17,15 +19,8 @@ const alias = [
 ]
 
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => ({
-  plugins: [svelte({ hot: false })],
-  resolve: {
-    // Ensure `browser` exports are used in tests
-    // Vitest prefers modules' `node` export by default
-    // Svelte's `node` export is its SSR bundle, which does not have onMount
-    // https://github.com/testing-library/svelte-testing-library/issues/222#issuecomment-1909993331
-    conditions: mode === 'test' ? ['browser'] : [],
-  },
+export default defineConfig({
+  plugins: [svelte({ hot: false }), svelteTesting()],
   test: {
     alias,
     environment: 'jsdom',
@@ -37,4 +32,4 @@ export default defineConfig(({ mode }) => ({
       include: ['src'],
     },
   },
-}))
+})