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

This commit is contained in:
Katerina Skroumpelou 2023-10-18 23:29:29 +03:00 committed by GitHub
parent 83d2cc2f40
commit 3df85295a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 29 additions and 24 deletions

View File

@ -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"],

View File

@ -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"],

View File

@ -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" %}

View File

@ -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);

View File

@ -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') {

View File

@ -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" %}

View File

@ -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 () => {

View File

@ -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';
}