From 5013c7a54d5c6d9ab18577930266695f930d772c Mon Sep 17 00:00:00 2001 From: Katerina Skroumpelou Date: Wed, 18 Oct 2023 16:06:55 +0300 Subject: [PATCH] fix(react): respect unitTestRunner none and inform about vitest --- .../react/generators/application.json | 2 +- .../packages/web/generators/application.json | 2 +- packages/react/docs/application-examples.md | 2 ++ .../application/lib/normalize-options.ts | 7 ++-- .../application/lib/update-jest-config.ts | 2 +- packages/web/docs/application-examples.md | 2 ++ .../application/application.spec.ts | 33 +++++++++++-------- .../src/generators/application/application.ts | 3 +- 8 files changed, 29 insertions(+), 24 deletions(-) diff --git a/docs/generated/packages/react/generators/application.json b/docs/generated/packages/react/generators/application.json index ec3c8e1f2df75..f240522122b4a 100644 --- a/docs/generated/packages/react/generators/application.json +++ b/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"], diff --git a/docs/generated/packages/web/generators/application.json b/docs/generated/packages/web/generators/application.json index 759bb8d85ae16..14a67a4242ea0 100644 --- a/docs/generated/packages/web/generators/application.json +++ b/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"], diff --git a/packages/react/docs/application-examples.md b/packages/react/docs/application-examples.md index e04cc4ffb0002..b274f1f812a6f 100644 --- a/packages/react/docs/application-examples.md +++ b/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" %} diff --git a/packages/react/src/generators/application/lib/normalize-options.ts b/packages/react/src/generators/application/lib/normalize-options.ts index c5d0cc52bd75a..5f99d1ee7e2a8 100644 --- a/packages/react/src/generators/application/lib/normalize-options.ts +++ b/packages/react/src/generators/application/lib/normalize-options.ts @@ -35,7 +35,6 @@ export async function normalizeOptions( }); 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( 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( 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); diff --git a/packages/react/src/generators/application/lib/update-jest-config.ts b/packages/react/src/generators/application/lib/update-jest-config.ts index b0e87bc785632..cfb8c37877e83 100644 --- a/packages/react/src/generators/application/lib/update-jest-config.ts +++ b/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') { diff --git a/packages/web/docs/application-examples.md b/packages/web/docs/application-examples.md index 753cd0e44df97..c76d8945e6465 100644 --- a/packages/web/docs/application-examples.md +++ b/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" %} diff --git a/packages/web/src/generators/application/application.spec.ts b/packages/web/src/generators/application/application.spec.ts index 7c1680bc43e6b..1a12bf5790777 100644 --- a/packages/web/src/generators/application/application.spec.ts +++ b/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 () => { diff --git a/packages/web/src/generators/application/application.ts b/packages/web/src/generators/application/application.ts index 3e61bea6a9965..32c6ac5a87c53 100644 --- a/packages/web/src/generators/application/application.ts +++ b/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'; }