fix(vite): add fix for vitest configuration (#14404)

(cherry picked from commit 351b4aa)

e2e/vite/src/vite.test.ts

@@ -210,7 +210,8 @@ describe('Vite Plugin', () => {
     it('should collect coverage', () => {
       runCLI(`generate @nrwl/react:lib ${lib} --unitTestRunner=vitest`);
       updateFile(`libs/${lib}/vite.config.ts`, () => {
-        return `import { defineConfig } from 'vite';
+        return `/// <reference types="vitest" />
+        import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 

packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`@nrwl/vite:configuration library mode should add config for building library 1`] = `
 "
+      /// <reference types=\\"vitest\\" />
       import { defineConfig } from 'vite';
       import react from '@vitejs/plugin-react';
       import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -57,6 +58,7 @@ import { join } from 'path';
 
 exports[`@nrwl/vite:configuration library mode should set up non buildable library correctly 1`] = `
 "
+      /// <reference types=\\"vitest\\" />
       import { defineConfig } from 'vite';
       import react from '@vitejs/plugin-react';
       import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -356,6 +358,7 @@ exports[`@nrwl/vite:configuration transform React app to use Vite by providing c
 
 exports[`@nrwl/vite:configuration transform React app to use Vite should create vite.config file at the root of the app 1`] = `
 "
+      /// <reference types=\\"vitest\\" />
       import { defineConfig } from 'vite';
       import react from '@vitejs/plugin-react';
       import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -499,6 +502,7 @@ exports[`@nrwl/vite:configuration transform React app to use Vite should transfo
 
 exports[`@nrwl/vite:configuration transform Web app to use Vite should create vite.config file at the root of the app 1`] = `
 "
+      /// <reference types=\\"vitest\\" />
       import { defineConfig } from 'vite';
       
       import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -631,6 +635,7 @@ exports[`@nrwl/vite:configuration transform Web app to use Vite should transform
 
 exports[`@nrwl/vite:configuration vitest should create a vitest configuration if "includeVitest" is true 1`] = `
 "
+      /// <reference types=\\"vitest\\" />
       import { defineConfig } from 'vite';
       import react from '@vitejs/plugin-react';
       import viteTsConfigPaths from 'vite-tsconfig-paths';

packages/vite/src/generators/vitest/__snapshots__/vitest.spec.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`vitest generator insourceTests should add the insourceSource option in the vite config 1`] = `
 "
+      /// <reference types=\\"vitest\\" />
       import { defineConfig } from 'vite';
       import react from '@vitejs/plugin-react';
       import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -45,6 +46,7 @@ exports[`vitest generator insourceTests should add the insourceSource option in
 
 exports[`vitest generator vite.config should create correct vite.config.ts file for apps 1`] = `
 "
+      /// <reference types=\\"vitest\\" />
       import { defineConfig } from 'vite';
       import react from '@vitejs/plugin-react';
       import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -86,6 +88,7 @@ exports[`vitest generator vite.config should create correct vite.config.ts file
 
 exports[`vitest generator vite.config should create correct vite.config.ts file for non buildable libs 1`] = `
 "
+      /// <reference types=\\"vitest\\" />
       import { defineConfig } from 'vite';
       import react from '@vitejs/plugin-react';
       import viteTsConfigPaths from 'vite-tsconfig-paths';

packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap

@@ -4,6 +4,7 @@ exports[`ensureBuildOptionsInViteConfig should add build and test options if def
 "import dts from 'vite-plugin-dts';
 import { join } from 'path';
 
+    /// <reference types=\\"vitest\\" />
     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -203,6 +204,7 @@ import { defineConfig } from 'vite';
 
 exports[`ensureBuildOptionsInViteConfig should add build options if it is using conditional config - do nothing for test 1`] = `
 "
+    /// <reference types=\\"vitest\\" />
     import { defineConfig } from 'vite';
     export default defineConfig(({ command, mode, ssrBuild }) => {
       if (command === 'serve') {
@@ -269,6 +271,7 @@ exports[`ensureBuildOptionsInViteConfig should not do anything if cannot underst
 
 exports[`ensureBuildOptionsInViteConfig should not do anything if project has everything setup already 1`] = `
 "
+    /// <reference types=\\"vitest\\" />
     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import viteTsConfigPaths from 'vite-tsconfig-paths';

packages/vite/src/utils/generator-utils.ts

@@ -582,6 +582,7 @@ export function createOrEditViteConfig(
   }
 
   viteConfigContent = `
+      /// <reference types="vitest" />
       import { defineConfig } from 'vite';
       ${reactPluginImportLine}
       import viteTsConfigPaths from 'vite-tsconfig-paths';

packages/vite/src/utils/test-files/test-vite-configs.ts

@@ -1,4 +1,5 @@
 export const noBuildOptions = `
+    /// <reference types="vitest" />
     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -24,6 +25,7 @@ export const noBuildOptions = `
     `;
 
 export const someBuildOptions = `
+    /// <reference types="vitest" />
     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -53,6 +55,7 @@ export const someBuildOptions = `
     `;
 
 export const noContentDefineConfig = `
+    /// <reference types="vitest" />
     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -61,6 +64,7 @@ export const noContentDefineConfig = `
     `;
 
 export const conditionalConfig = `
+    /// <reference types="vitest" />
     import { defineConfig } from 'vite';
     export default defineConfig(({ command, mode, ssrBuild }) => {
       if (command === 'serve') {
@@ -78,6 +82,7 @@ export const conditionalConfig = `
     `;
 
 export const configNoDefineConfig = `
+    /// <reference types="vitest" />
     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -93,6 +98,7 @@ export const configNoDefineConfig = `
     `;
 
 export const noBuildOptionsHasTestOption = `
+    /// <reference types="vitest" />
     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -118,6 +124,7 @@ export const noBuildOptionsHasTestOption = `
     `;
 
 export const someBuildOptionsSomeTestOption = `
+    /// <reference types="vitest" />
     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -142,6 +149,7 @@ export const someBuildOptionsSomeTestOption = `
     `;
 
 export const hasEverything = `
+    /// <reference types="vitest" />
     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import viteTsConfigPaths from 'vite-tsconfig-paths';

packages/vite/src/utils/test-utils.ts

@@ -90,7 +90,8 @@ export function mockViteReactAppGenerator(tree: Tree): Tree {
 
   tree.write(
     `apps/${appName}/vite.config.ts`,
-    `import { defineConfig } from 'vite';
+    `    /// <reference types="vitest" />
+    import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import tsconfigPaths from 'vite-tsconfig-paths';
     
@@ -533,7 +534,8 @@ export function mockReactLibNonBuildableVitestRunnerGenerator(
 
   tree.write(
     `libs/${libName}/vite.config.ts`,
-    `import { defineConfig } from 'vite';
+    `/// <reference types="vitest" />
+    import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import viteTsConfigPaths from 'vite-tsconfig-paths';