feat(remix): generate vitest file instead vite.config (#21100)

e2e/remix/tests/nx-remix.test.ts

@@ -60,7 +60,7 @@ describe('remix e2e', () => {
       const plugin = uniq('remix');
       const appName = `sub-${plugin}`;
       runCLI(
-        `generate @nx/remix:app ${plugin} --directory=sub --projectNameAndRootFormat=derived --rootProject=false`
+        `generate @nx/remix:app ${plugin} --directory=sub --projectNameAndRootFormat=derived --rootProject=false --no-interactive`
       );
       const project = readJson(`sub/${plugin}/project.json`);
       expect(project.targets.build.options.outputPath).toEqual(
@@ -74,7 +74,7 @@ describe('remix e2e', () => {
     it('should create src in the specified directory --projectNameAndRootFormat=as-provided', async () => {
       const plugin = uniq('remix');
       runCLI(
-        `generate @nx/remix:app ${plugin} --directory=subdir --projectNameAndRootFormat=as-provided --rootProject=false`
+        `generate @nx/remix:app ${plugin} --directory=subdir --projectNameAndRootFormat=as-provided --rootProject=false --no-interactive`
       );
       const project = readJson(`subdir/project.json`);
       expect(project.targets.build.options.outputPath).toEqual(`dist/subdir`);

packages/remix/src/generators/application/application.impl.spec.ts

@@ -66,7 +66,7 @@ describe('Remix Application', () => {
         expectTargetsToBeCorrect(tree, '.');
 
         expect(tree.read('remix.config.cjs', 'utf-8')).toMatchSnapshot();
-        expect(tree.read('vite.config.ts', 'utf-8')).toMatchSnapshot();
+        expect(tree.read('vitest.config.ts', 'utf-8')).toMatchSnapshot();
         expect(
           tree.read('tests/routes/_index.spec.tsx', 'utf-8')
         ).toMatchSnapshot();
@@ -248,7 +248,7 @@ describe('Remix Application', () => {
             tree.read(`${appDir}/remix.config.cjs`, 'utf-8')
           ).toMatchSnapshot();
           expect(
-            tree.read(`${appDir}/vite.config.ts`, 'utf-8')
+            tree.read(`${appDir}/vitest.config.ts`, 'utf-8')
           ).toMatchSnapshot();
           expect(
             tree.read(`${appDir}/test-setup.ts`, 'utf-8')

packages/remix/src/generators/application/application.impl.ts

@@ -137,10 +137,9 @@ export default async function (tree: Tree, _options: NxRemixGeneratorSchema) {
 
   if (options.unitTestRunner !== 'none') {
     if (options.unitTestRunner === 'vitest') {
-      const { vitestGenerator } = ensurePackage<typeof import('@nx/vite')>(
+      const { vitestGenerator, createOrEditViteConfig } = ensurePackage<
-        '@nx/vite',
+        typeof import('@nx/vite')
-        getPackageVersion(tree, 'nx')
+      >('@nx/vite', getPackageVersion(tree, 'nx'));
-      );
       const vitestTask = await vitestGenerator(tree, {
         uiFramework: 'react',
         project: options.projectName,
@@ -148,7 +147,22 @@ export default async function (tree: Tree, _options: NxRemixGeneratorSchema) {
         inSourceTests: false,
         skipFormat: true,
         testEnvironment: 'jsdom',
+        skipViteConfig: true,
       });
+      createOrEditViteConfig(
+        tree,
+        {
+          project: options.projectName,
+          includeLib: false,
+          includeVitest: true,
+          testEnvironment: 'jsdom',
+          imports: [`import react from '@vitejs/plugin-react';`],
+          plugins: [`react()`],
+        },
+        true,
+        undefined,
+        true
+      );
       tasks.push(vitestTask);
     } else {
       const { configurationGenerator: jestConfigurationGenerator } =

packages/remix/src/generators/application/lib/update-unit-test-config.ts

@@ -7,8 +7,8 @@ import {
 } from '@nx/devkit';
 import {
   updateJestTestSetup,
-  updateViteTestIncludes,
+  updateVitestTestIncludes,
-  updateViteTestSetup,
+  updateVitestTestSetup,
 } from '../../../utils/testing-config-utils';
 import {
   getRemixVersion,
@@ -32,18 +32,18 @@ export function updateUnitTestConfig(
   );
 
   if (unitTestRunner === 'vitest') {
-    const pathToViteConfig = joinPathFragments(pathToRoot, 'vite.config.ts');
+    const pathToViteConfig = joinPathFragments(pathToRoot, 'vitest.config.ts');
-    updateViteTestIncludes(
+    updateVitestTestIncludes(
       tree,
       pathToViteConfig,
       './app/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'
     );
-    updateViteTestIncludes(
+    updateVitestTestIncludes(
       tree,
       pathToViteConfig,
       './tests/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'
     );
-    updateViteTestSetup(tree, pathToViteConfig, 'test-setup.ts');
+    updateVitestTestSetup(tree, pathToViteConfig, 'test-setup.ts');
   } else if (unitTestRunner === 'jest') {
     const pathToJestConfig = joinPathFragments(pathToRoot, 'jest.config.ts');
     tree.rename('jest.preset.js', 'jest.preset.cjs');

packages/remix/src/generators/library/lib/add-unit-testing.ts

@@ -6,7 +6,7 @@ import {
 } from '@nx/devkit';
 import {
   updateJestTestSetup,
-  updateViteTestSetup,
+  updateVitestTestSetup,
 } from '../../../utils/testing-config-utils';
 import {
   getRemixVersion,
@@ -40,7 +40,7 @@ export function addUnitTestingSetup(tree: Tree, options: RemixLibraryOptions) {
       options.projectRoot,
       `vite.config.ts`
     );
-    updateViteTestSetup(tree, pathToVitestConfig, './src/test-setup.ts');
+    updateVitestTestSetup(tree, pathToVitestConfig, './src/test-setup.ts');
   } else if (options.unitTestRunner === 'jest') {
     const pathToJestConfig = joinPathFragments(
       options.projectRoot,

packages/remix/src/utils/testing-config-utils.ts

@@ -3,16 +3,16 @@ import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript'
 
 let tsModule: typeof import('typescript');
 
-export function updateViteTestSetup(
+export function updateVitestTestSetup(
   tree: Tree,
-  pathToViteConfig: string,
+  pathToVitestConfig: string,
   pathToTestSetup: string
 ) {
   if (!tsModule) {
     tsModule = ensureTypescript();
   }
   const { tsquery } = require('@phenomnomnominal/tsquery');
-  const fileContents = tree.read(pathToViteConfig, 'utf-8');
+  const fileContents = tree.read(pathToVitestConfig, 'utf-8');
 
   const ast = tsquery.ast(fileContents);
 
@@ -50,7 +50,7 @@ export function updateViteTestSetup(
     }
   }
 
-  tree.write(pathToViteConfig, updatedFileContents);
+  tree.write(pathToVitestConfig, updatedFileContents);
 }
 
 export function updateJestTestSetup(
@@ -100,16 +100,16 @@ export function updateJestTestSetup(
   }
 }
 
-export function updateViteTestIncludes(
+export function updateVitestTestIncludes(
   tree: Tree,
-  pathToViteConfig: string,
+  pathToVitestConfig: string,
   includesString: string
 ) {
   if (!tsModule) {
     tsModule = ensureTypescript();
   }
   const { tsquery } = require('@phenomnomnominal/tsquery');
-  const fileContents = tree.read(pathToViteConfig, 'utf-8');
+  const fileContents = tree.read(pathToVitestConfig, 'utf-8');
 
   const ast = tsquery.ast(fileContents);
 
@@ -123,6 +123,6 @@ export function updateViteTestIncludes(
       nodes[0].getStart()
     )}include: ["${includesString}"]${fileContents.slice(nodes[0].getEnd())}`;
 
-    tree.write(pathToViteConfig, updatedFileContents);
+    tree.write(pathToVitestConfig, updatedFileContents);
   }
 }