fix(browser): exclude missed packages from optimization, print help message (#6445)

Author: sheremet-va

packages/browser/src/node/index.ts

@@ -1,6 +1,6 @@
 import type { WorkspaceProject } from 'vitest/node'
 import type { Plugin } from 'vitest/config'
-import { createServer } from 'vitest/node'
+import { createViteLogger, createViteServer } from 'vitest/node'
 import c from 'tinyrainbow'
 import { version } from '../../package.json'
 import { setupBrowserRpc } from './rpc'
@@ -30,10 +30,28 @@ export async function createBrowserServer(
 
   const configPath = typeof configFile === 'string' ? configFile : false
 
-  const vite = await createServer({
+  const logLevel = (process.env.VITEST_BROWSER_DEBUG as 'info') ?? 'info'
+
+  const logger = createViteLogger(logLevel)
+
+  const vite = await createViteServer({
     ...project.options, // spread project config inlined in root workspace config
     base: '/',
-    logLevel: (process.env.VITEST_BROWSER_DEBUG as 'info') ?? 'info',
+    logLevel,
+    customLogger: {
+      ...logger,
+      info(msg, options) {
+        logger.info(msg, options)
+        if (msg.includes('optimized dependencies changed. reloading')) {
+          logger.warn(
+            [
+              c.yellow(`\n${c.bold('[vitest]')} Vite unexpectedly reloaded a test. This may cause tests to fail, lead to flaky behaviour or duplicated test runs.\n`),
+              c.yellow(`For a stable experience, please add mentioned dependencies to your config\'s ${c.bold('\`optimizeDeps.include\`')} field manually.\n\n`),
+            ].join(''),
+          )
+        }
+      },
+    },
     mode: project.config.mode,
     configFile: configPath,
     // watch is handled by Vitest

packages/browser/src/node/plugin.ts

@@ -182,6 +182,29 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => {
           ...(project.config.snapshotSerializers || []),
         ]
 
+        const exclude = [
+          'vitest',
+          'vitest/utils',
+          'vitest/browser',
+          'vitest/runners',
+          '@vitest/browser',
+          '@vitest/browser/client',
+          '@vitest/utils',
+          '@vitest/utils/source-map',
+          '@vitest/runner',
+          '@vitest/spy',
+          '@vitest/utils/error',
+          '@vitest/snapshot',
+          '@vitest/expect',
+          'std-env',
+          'tinybench',
+          'tinyspy',
+          'tinyrainbow',
+          'pathe',
+          'msw',
+          'msw/browser',
+        ]
+
         if (project.config.diff) {
           entries.push(project.config.diff)
         }
@@ -193,12 +216,14 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => {
             const path = tryResolve('@vitest/coverage-v8', [project.ctx.config.root])
             if (path) {
               entries.push(path)
+              exclude.push('@vitest/coverage-v8/browser')
             }
           }
           else if (provider === 'istanbul') {
             const path = tryResolve('@vitest/coverage-istanbul', [project.ctx.config.root])
             if (path) {
               entries.push(path)
+              exclude.push('@vitest/coverage-istanbul')
             }
           }
           else if (provider === 'custom' && coverage.customProviderModule) {
@@ -224,29 +249,6 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => {
           include.push(vue)
         }
 
-        const exclude = [
-          'vitest',
-          'vitest/utils',
-          'vitest/browser',
-          'vitest/runners',
-          '@vitest/browser',
-          '@vitest/browser/client',
-          '@vitest/utils',
-          '@vitest/utils/source-map',
-          '@vitest/runner',
-          '@vitest/spy',
-          '@vitest/utils/error',
-          '@vitest/snapshot',
-          '@vitest/expect',
-          'std-env',
-          'tinybench',
-          'tinyspy',
-          'tinyrainbow',
-          'pathe',
-          'msw',
-          'msw/browser',
-        ]
-
         const svelte = tryResolve('vitest-browser-svelte', [project.ctx.config.root])
         if (svelte) {
           exclude.push(svelte)

packages/vitest/src/public/node.ts

@@ -1,3 +1,4 @@
+import { createServer as _createServer } from 'vite'
 import { TestModule as _TestFile } from '../node/reporters/reported-tasks'
 import type { ModuleDiagnostic as _FileDiagnostic } from '../node/reporters/reported-tasks'
 
@@ -49,7 +50,15 @@ export type { JsonOptions } from '../node/reporters/json'
 export type { JUnitOptions } from '../node/reporters/junit'
 export type { HTMLOptions } from '../node/reporters/html'
 
-export { isFileServingAllowed, createServer, parseAst, parseAstAsync } from 'vite'
+export {
+  isFileServingAllowed,
+  parseAst,
+  parseAstAsync,
+  createLogger as createViteLogger,
+} from 'vite'
+/** @deprecated use `createViteServer` instead */
+export const createServer = _createServer
+export const createViteServer = _createServer
 export type * as Vite from 'vite'
 
 export { TestCase, TestModule, TestSuite } from '../node/reporters/reported-tasks'