fix(browser): fix process.env and import.meta.env defines in inline project (#9239)

Author: hi-ogawa

packages/browser/src/node/index.ts

@@ -49,6 +49,7 @@ export const createBrowserServer: BrowserServerFactory = async (options) => {
   let cacheDir: string
   const vite = await createViteServer({
     ...project.options, // spread project config inlined in root workspace config
+    define: project.config.viteDefine,
     base: '/',
     root: project.config.root,
     logLevel,

packages/vitest/src/node/plugins/index.ts

@@ -61,9 +61,11 @@ export async function VitestPlugin(
 
         // store defines for globalThis to make them
         // reassignable when running in worker in src/runtime/setup.ts
+        const originalDefine = { ...viteConfig.define } // stash original defines for browser mode
         const defines: Record<string, any> = deleteDefineConfig(viteConfig)
 
         ;(options as unknown as ResolvedConfig).defines = defines
+        ;(options as unknown as ResolvedConfig).viteDefine = originalDefine
 
         let open: string | boolean | undefined = false
 

packages/vitest/src/node/plugins/workspace.ts

@@ -125,6 +125,7 @@ export function WorkspaceVitestPlugin(
         this.meta.watchMode = false
       },
       config(viteConfig) {
+        const originalDefine = { ...viteConfig.define } // stash original defines for browser mode
         const defines: Record<string, any> = deleteDefineConfig(viteConfig)
 
         const testConfig = viteConfig.test || {}
@@ -197,6 +198,7 @@ export function WorkspaceVitestPlugin(
         }
 
         ;(config.test as ResolvedConfig).defines = defines
+        ;(config.test as ResolvedConfig).viteDefine = originalDefine
 
         const classNameStrategy
           = (typeof testConfig.css !== 'boolean'

packages/vitest/src/node/types/config.ts

@@ -1049,6 +1049,7 @@ export interface ResolvedConfig
   reporters: (InlineReporter | ReporterWithOptions)[]
 
   defines: Record<string, any>
+  viteDefine: Record<string, any>
 
   api: ApiConfig & { token: string }
   cliExclude?: string[]

test/config/fixtures/browser-define/basic.test.ts

@@ -0,0 +1,6 @@
+import { test, expect } from 'vitest'
+
+test('passes', () => {
+  expect(process.env.TEST_PROCESS_ENV).toBe('PROCESS_OK')
+  expect(import.meta.env.TEST_META_ENV).toBe('META_OK')
+})

test/config/fixtures/browser-define/vitest.config.ts

@@ -0,0 +1,28 @@
+import { playwright } from '@vitest/browser-playwright'
+import { defineConfig } from 'vitest/config'
+
+let config = defineConfig({
+  define: {
+    'process.env.TEST_PROCESS_ENV': JSON.stringify('PROCESS_OK'),
+    'import.meta.env.TEST_META_ENV': JSON.stringify('META_OK'),
+  },
+  test: {
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      instances: [
+        { browser: 'chromium' },
+      ],
+    },
+  },
+})
+
+if (process.env.BROWSER_DEFINE_TEST_PROEJCT === "true") {
+  config = defineConfig({
+    test: {
+      projects: [config],
+    },
+  })
+}
+
+export default config

test/config/test/browser-define.test.ts

@@ -0,0 +1,38 @@
+import { expect, test } from 'vitest'
+import { runVitest } from '../../test-utils'
+
+test('browser root', async () => {
+  process.env.BROWSER_DEFINE_TEST_PROEJCT = 'false'
+  const { testTree, stderr } = await runVitest({
+    root: './fixtures/browser-define',
+    browser: {
+      headless: true,
+    },
+  })
+  expect(stderr).toBe('')
+  expect(testTree()).toMatchInlineSnapshot(`
+    {
+      "basic.test.ts": {
+        "passes": "passed",
+      },
+    }
+  `)
+})
+
+test('browser proejct', async () => {
+  process.env.BROWSER_DEFINE_TEST_PROEJCT = 'true'
+  const { testTree, stderr } = await runVitest({
+    root: './fixtures/browser-define',
+    browser: {
+      headless: true,
+    },
+  })
+  expect(stderr).toBe('')
+  expect(testTree()).toMatchInlineSnapshot(`
+    {
+      "basic.test.ts": {
+        "passes": "passed",
+      },
+    }
+  `)
+})