fix(browser): support @testing-library/vue in browser mode out of the box

sheremet-va · sheremet-va · commit 76b82e5b999c · 2024-06-03T13:22:10.000+02:00
diff --git a/packages/browser/src/node/index.ts b/packages/browser/src/node/index.ts
@@ -1,5 +1,6 @@
 import { fileURLToPath } from 'node:url'
 import { readFile } from 'node:fs/promises'
+import { createRequire } from 'node:module'
 import { basename, join, resolve } from 'pathe'
 import sirv from 'sirv'
 import type { ViteDevServer } from 'vite'
@@ -209,6 +210,31 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
     },
     BrowserContext(project),
     DynamicImport(),
+    // TODO: remove this when @testing-library/vue supports ESM
+    {
+      name: 'vitest:browser:support-vue-testing-library',
+      config() {
+        return {
+          optimizeDeps: {
+            esbuildOptions: {
+              plugins: [
+                {
+                  name: 'test-utils-rewrite',
+                  setup(build) {
+                    const _require = createRequire(import.meta.url)
+                    build.onResolve({ filter: /@vue\/test-utils/ }, (args) => {
+                      // resolve to CJS instead of the browser because the browser version expects a global Vue object
+                      const resolved = _require.resolve(args.path, { paths: [args.importer] })
+                      return { path: resolved }
+                    })
+                  },
+                },
+              ],
+            },
+          },
+        }
+      },
+    },
   ]
 }
 
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
@@ -1,4 +1,3 @@
-import { createRequire } from 'node:module'
 import { resolve } from 'pathe'
 import type { UserConfig } from 'vite'
 import { defineConfig } from 'vite'
@@ -87,21 +86,6 @@ export const config: UserConfig = {
       'vue',
       '@vue/test-utils',
     ],
-    esbuildOptions: {
-      plugins: [
-        {
-          name: 'test-utils-rewrite',
-          setup(build) {
-            const _require = createRequire(import.meta.url)
-            build.onResolve({ filter: /@vue\/test-utils/ }, (args) => {
-              // resolve to CJS instead of the browser because the browser version expects a global Vue object
-              const resolved = _require.resolve(args.path, { paths: [args.importer] })
-              return { path: resolved }
-            })
-          },
-        },
-      ],
-    },
   },
   test: {
     browser: {
