fix(react): respect unitTestRunner none and inform about vitest (#19676)

docs/generated/packages/react/generators/application.json

@@ -187,7 +187,7 @@
       }
     },
     "required": ["name"],
-    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/react:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/react:app my-app --bundler=vite\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=my-dir`. See the [workspace layout documentation](/reference/nx-json#workspace-layout) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/react:app my-app --directory=apps/my-dir/my-app --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nx/react:app my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
+    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/react:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/react:app my-app --bundler=vite\n```\n\nWhen choosing `vite` as the bundler, your unit tests will be set up with `vitest`, unless you choose `none` for `unitTestRunner`.\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=my-dir`. See the [workspace layout documentation](/reference/nx-json#workspace-layout) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/react:app my-app --directory=apps/my-dir/my-app --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nx/react:app my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
     "presets": []
   },
   "aliases": ["app"],

docs/generated/packages/web/generators/application.json

@@ -106,7 +106,7 @@
       }
     },
     "required": ["name"],
-    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/web:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/web:app my-app --bundler=vite\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory\" %}\n\nCreate an application named `my-app` in the `my-dir` directory:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=my-dir`. See the [workspace layout documentation](/reference/nx-json#workspace-layout) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/web:app my-app --directory=apps/my-dir/my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nx/web:app my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
+    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/web:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/web:app my-app --bundler=vite\n```\n\nWhen choosing `vite` as the bundler, your unit tests will be set up with `vitest`, unless you choose `none` for `unitTestRunner`.\n\n{% /tab %}\n\n{% tab label=\"Specify directory\" %}\n\nCreate an application named `my-app` in the `my-dir` directory:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=my-dir`. See the [workspace layout documentation](/reference/nx-json#workspace-layout) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/web:app my-app --directory=apps/my-dir/my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nx/web:app my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
     "presets": []
   },
   "aliases": ["app"],

packages/react/docs/application-examples.md

@@ -19,6 +19,8 @@ Create an application named `my-app`:
 nx g @nx/react:app my-app --bundler=vite
 ```
 
+When choosing `vite` as the bundler, your unit tests will be set up with `vitest`, unless you choose `none` for `unitTestRunner`.
+
 {% /tab %}
 
 {% tab label="Specify directory and style extension" %}

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

@@ -35,7 +35,6 @@ export async function normalizeOptions<T extends Schema = Schema>(
   });
   options.rootProject = appProjectRoot === '.';
   options.projectNameAndRootFormat = projectNameAndRootFormat;
-
   const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
   const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
 
@@ -51,7 +50,7 @@ export async function normalizeOptions<T extends Schema = Schema>(
 
   assertValidStyle(options.style);
 
-  if (options.bundler === 'vite') {
+  if (options.bundler === 'vite' && options.unitTestRunner !== 'none') {
     options.unitTestRunner = 'vitest';
   }
 
@@ -73,9 +72,7 @@ export async function normalizeOptions<T extends Schema = Schema>(
   normalized.classComponent = normalized.classComponent ?? false;
   normalized.compiler = normalized.compiler ?? 'babel';
   normalized.bundler = normalized.bundler ?? 'webpack';
-  normalized.unitTestRunner =
-    normalized.unitTestRunner ??
-    (normalized.bundler === 'vite' ? 'vitest' : 'jest');
+  normalized.unitTestRunner = normalized.unitTestRunner ?? 'jest';
   normalized.e2eTestRunner = normalized.e2eTestRunner ?? 'cypress';
   normalized.inSourceTests = normalized.minimal || normalized.inSourceTests;
   normalized.devServerPort ??= findFreePort(host);

packages/react/src/generators/application/lib/update-jest-config.ts

@@ -1,6 +1,6 @@
 import { updateJestConfigContent } from '../../../utils/jest-utils';
 import { NormalizedSchema } from '../schema';
-import { offsetFromRoot, Tree, updateJson } from '@nx/devkit';
+import { Tree, updateJson } from '@nx/devkit';
 
 export function updateSpecConfig(host: Tree, options: NormalizedSchema) {
   if (options.unitTestRunner === 'none') {

packages/web/docs/application-examples.md

@@ -19,6 +19,8 @@ Create an application named `my-app`:
 nx g @nx/web:app my-app --bundler=vite
 ```
 
+When choosing `vite` as the bundler, your unit tests will be set up with `vitest`, unless you choose `none` for `unitTestRunner`.
+
 {% /tab %}
 
 {% tab label="Specify directory" %}

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

@@ -489,7 +489,6 @@ describe('app', () => {
     it('--bundler=none should use jest as the default', async () => {
       await applicationGenerator(tree, {
         name: 'my-cool-app',
-
         bundler: 'none',
         projectNameAndRootFormat: 'as-provided',
       });
@@ -507,7 +506,10 @@ describe('app', () => {
       ).toEqual('@nx/jest:jest');
     });
 
-    it('--bundler=vite --unitTestRunner=jest', async () => {
+    // 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 () => {
       await applicationGenerator(tree, {
         name: 'my-vite-app',
 
@@ -516,21 +518,24 @@ describe('app', () => {
         projectNameAndRootFormat: 'as-provided',
       });
       expect(tree.exists('my-vite-app/vite.config.ts')).toBeTruthy();
+      expect(tree.read('my-vite-app/vite.config.ts', 'utf-8')).toContain(
+        'test: {'
+      );
+      expect(tree.exists('my-vite-app/jest.config.ts')).toBeFalsy();
+    });
+
+    it('--bundler=vite --unitTestRunner=none', async () => {
+      await applicationGenerator(tree, {
+        name: 'my-vite-app',
+        bundler: 'vite',
+        unitTestRunner: 'none',
+        projectNameAndRootFormat: 'as-provided',
+      });
+      expect(tree.exists('my-vite-app/vite.config.ts')).toBeTruthy();
       expect(tree.read('my-vite-app/vite.config.ts', 'utf-8')).not.toContain(
         'test: {'
       );
-      expect(tree.exists('my-vite-app/jest.config.ts')).toBeTruthy();
-      expect(
-        readJson(tree, 'my-vite-app/tsconfig.spec.json').compilerOptions.types
-      ).toMatchInlineSnapshot(`
-        [
-          "jest",
-          "node",
-        ]
-      `);
-      expect(
-        readProjectConfiguration(tree, 'my-vite-app').targets.test.executor
-      ).toEqual('@nx/jest:jest');
+      expect(tree.exists('my-vite-app/tsconfig.spec.json')).toBeFalsy();
     });
 
     it('--bundler=webpack --unitTestRunner=vitest', async () => {

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

@@ -381,7 +381,6 @@ async function normalizeOptions(
     callingGenerator: '@nx/web:application',
   });
   options.projectNameAndRootFormat = projectNameAndRootFormat;
-
   const e2eProjectName = `${appProjectName}-e2e`;
   const e2eProjectRoot = `${appProjectRoot}-e2e`;
 
@@ -391,7 +390,7 @@ async function normalizeOptions(
     ? options.tags.split(',').map((s) => s.trim())
     : [];
 
-  if (options.bundler === 'vite' && !options.unitTestRunner) {
+  if (options.bundler === 'vite' && options.unitTestRunner !== 'none') {
     options.unitTestRunner = 'vitest';
   }