fix(react): respect unitTestRunner passed to the generator (#23383)

closes: #22276

e2e/nx-init/src/nx-init-react.test.ts

@@ -163,7 +163,6 @@ describe('nx init (for React - legacy)', () => {
     );
 
     const packageJson = readJson('package.json');
-    expect(packageJson.devDependencies['@nx/jest']).toBeUndefined();
     expect(packageJson.dependencies['redux']).toBeDefined();
     expect(packageJson.name).toEqual(appName);
 

e2e/react/src/react-vite.test.ts

@@ -151,4 +151,20 @@ describe('Build React applications and libraries with Vite', () => {
       `dist/libs/${nonBuildableLib}/index.mjs`
     );
   }, 300_000);
+
+  it('should support bundling with Vite and Jest', async () => {
+    const viteApp = uniq('viteapp');
+
+    runCLI(
+      `generate @nx/react:app ${viteApp} --bundler=vite --unitTestRunner=jest --no-interactive`
+    );
+
+    const appTestResults = await runCLIAsync(`test ${viteApp}`);
+    expect(appTestResults.combinedOutput).toContain(
+      'Successfully ran target test'
+    );
+
+    await runCLIAsync(`build ${viteApp}`);
+    checkFilesExist(`dist/apps/${viteApp}/index.html`);
+  }, 300_000);
 });

e2e/web/src/web-vite.test.ts

@@ -28,7 +28,7 @@ describe('Web Components Applications with bundler set as vite', () => {
 
     const testResults = await runCLIAsync(`test ${appName}`);
 
-    expect(testResults.combinedOutput).toContain('Tests  2 passed (2)');
+    expect(testResults.combinedOutput).toContain(`PASS ${appName}`);
 
     const lintE2eResults = runCLI(`lint ${appName}-e2e`);
 

packages/react/src/generators/application/__snapshots__/application.legacy.spec.ts.snap

@@ -38,19 +38,6 @@ nxViteTsPaths()],
     },
     
         
-        test: {
+        
-    globals: true,
-    cache: {
-      dir: '../node_modules/.vitest/my-vite-app'
-    },
-    environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: '../coverage/my-vite-app',
-      provider: 'v8',
-    }
-  },
       });"
 `;

packages/react/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -126,20 +126,7 @@ nxViteTsPaths()],
     },
     
         
-        test: {
+        
-    globals: true,
-    cache: {
-      dir: '../node_modules/.vitest/my-app'
-    },
-    environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: '../coverage/my-app',
-      provider: 'v8',
-    }
-  },
       });"
 `;
 
@@ -217,20 +204,7 @@ nxViteTsPaths()],
     },
     
         
-        test: {
+        
-    globals: true,
-    cache: {
-      dir: '../node_modules/.vitest/my-app'
-    },
-    environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: '../coverage/my-app',
-      provider: 'v8',
-    }
-  },
       });"
 `;
 
@@ -355,20 +329,7 @@ nxViteTsPaths()],
     },
     
         
-        test: {
+        
-    globals: true,
-    cache: {
-      dir: '../node_modules/.vitest/my-app'
-    },
-    environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: '../coverage/my-app',
-      provider: 'v8',
-    }
-  },
       });"
 `;
 

packages/react/src/generators/application/lib/normalize-options.ts

@@ -95,10 +95,6 @@ export async function normalizeOptions<T extends Schema = Schema>(
 
   assertValidStyle(options.style);
 
-  if (options.bundler === 'vite' && options.unitTestRunner !== 'none') {
-    options.unitTestRunner = 'vitest';
-  }
-
   const normalized = {
     ...options,
     name: names(options.name).fileName,

packages/web/src/generators/application/application.legacy.spec.ts

@@ -202,12 +202,12 @@ describe('web app generator (legacy)', () => {
             },
           },
           "test": {
-            "executor": "@nx/vite:test",
+            "executor": "@nx/jest:jest",
             "options": {
-              "reportsDirectory": "../coverage/my-vite-app",
+              "jestConfig": "my-vite-app/jest.config.ts",
             },
             "outputs": [
-              "{options.reportsDirectory}",
+              "{workspaceRoot}/coverage/{projectRoot}",
             ],
           },
         },

packages/web/src/generators/application/application.spec.ts

@@ -425,7 +425,7 @@ describe('app', () => {
     // Updated this test to match the way we do this for React
     // When user chooses Vite as bundler and they choose to generate unit tests
     // then use vitest
-    it('--bundler=vite --unitTestRunner=jest - still generate with vitest', async () => {
+    it('--bundler=vite --unitTestRunner=jest respects unitTestRunner given', async () => {
       await applicationGenerator(tree, {
         name: 'my-vite-app',
 
@@ -435,10 +435,7 @@ describe('app', () => {
         addPlugin: true,
       });
       expect(tree.exists('my-vite-app/vite.config.ts')).toBeTruthy();
-      expect(tree.read('my-vite-app/vite.config.ts', 'utf-8')).toContain(
+      expect(tree.exists('my-vite-app/jest.config.ts')).toBeTruthy();
-        'test: {'
-      );
-      expect(tree.exists('my-vite-app/jest.config.ts')).toBeFalsy();
     });
 
     it('--bundler=vite --unitTestRunner=none', async () => {

packages/web/src/generators/application/application.ts

@@ -522,10 +522,6 @@ async function normalizeOptions(
     ? options.tags.split(',').map((s) => s.trim())
     : [];
 
-  if (options.bundler === 'vite' && options.unitTestRunner !== 'none') {
-    options.unitTestRunner = 'vitest';
-  }
-
   options.style = options.style || 'css';
   options.linter = options.linter || ('eslint' as Linter.EsLint);
   options.unitTestRunner = options.unitTestRunner || 'jest';