miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(testing): add support for additional environment options when generating vite config (#17560)

Browse Source
This commit is contained in:
Jack Hsu 2023-06-13 13:30:52 -04:00 committed by GitHub
parent 0374db54fd
commit 8d5ef222cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 174 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/generated/packages/js/generators/library.json
View File

@ -56,8 +56,8 @@
"testEnvironment": {
"type": "string",
"enum": ["jsdom", "node"],
"description": "The test environment to use if unitTestRunner is set to jest.",
"default": "jsdom"
"description": "The test environment to use if unitTestRunner is set to jest or vitest.",
"default": "node"
},
"pascalCaseFiles": {
"type": "boolean",

8
docs/generated/packages/vite/generators/configuration.json
View File

File diff suppressed because one or more lines are too long

6
docs/generated/packages/vite/generators/init.json
View File

@ -25,6 +25,12 @@
"type": "boolean",
"description": "Add dependencies needed to build libraries.",
"default": false
},
"testEnvironment": {
"description": "The vitest environment to use. See https://vitest.dev/config/#environment.",
"type": "string",
"enum": ["node", "jsdom", "happy-dom", "edge-runtime"],
"default": "jsdom"
}
},
"examplesFile": "---\ntitle: Examples for the Vite init generator\ndescription: This page contains examples for the Vite @nx/vite:init generator, which helps you initialize vite in your Nx workspace, by installing the necessary dependencies.\n---\n\nThis is a generator will initialize Vite.js in your workspace. It will install all the necessary dependencies. You can read more about how this generator works, in the [Vite package overview page](/packages/vite).\n\n{% callout type=\"note\" title=\"string\" %}\nYou don't need to use this generator on its own.\n{% /callout %}\n\nThis generator will be called automatically when you are either converting an existing React or Web app to use Vite, using the [`@nx/vite:configuration` generator](/packages/vite/generators/configuration), or when you are creating a new React or Web app using the [`@nx/react:app`](/packages/react/generators/application) or [`@nx/web:app`](/packages/web/generators/application) generators, if you choose `vite` as the `bundler`.\n\nIf you need to for some reason, you can use it on its own like this:\n\n```bash\nnx g @nx/vite:init\n```\n\n## Examples\n\n### Install all the necessary dependencies for Vite and the React plugin\n\n```bash\nnx g @nx/vite:init --uiFramework=react\n```\n\n### Install all the necessary dependencies for Vite\n\n```bash\nnx g @nx/vite:init --uiFramework=none\n```\n",

5
docs/generated/packages/vite/generators/vitest.json
View File

@ -46,6 +46,11 @@
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"testEnvironment": {
"description": "The vitest environment to use. See https://vitest.dev/config/#environment.",
"type": "string",
"enum": ["node", "jsdom", "happy-dom", "edge-runtime"]
}
},
"required": ["project"],

13
e2e/jest/src/jest.test.ts
View File

@ -24,8 +24,12 @@ describe('Jest', () => {
const testGlobal = `'My Test Global'`;
const mylib = uniq('mylib');
const utilLib = uniq('util-lib');
runCLI(`generate @nx/js:lib ${mylib} --unit-test-runner jest`);
runCLI(`generate @nx/js:lib ${utilLib} --importPath=@global-fun/globals`);
runCLI(
`generate @nx/js:lib ${mylib} --unitTestRunner=jest --no-interactive`
);
runCLI(
`generate @nx/js:lib ${utilLib} --importPath=@global-fun/globals --unitTestRunner=jest --no-interactive`
);
updateFile(
`libs/${utilLib}/src/index.ts`,
stripIndents`
@ -74,6 +78,7 @@ describe('Jest', () => {
`libs/${mylib}/jest.config.ts`,
stripIndents`
export default {
testEnvironment: 'node',
displayName: "${mylib}",
preset: "../../jest.preset.js",
transform: {
@ -87,7 +92,9 @@ describe('Jest', () => {
};`
);
const appResult = await runCLIAsync(`test ${mylib} --no-watch`);
const appResult = await runCLIAsync(`test ${mylib} --no-watch`, {
silenceError: true,
});
expect(appResult.combinedOutput).toContain(
'Test Suites: 1 passed, 1 total'
);

2
packages/js/src/generators/library/library.ts
View File

@ -88,6 +88,7 @@ export async function projectGenerator(
includeVitest: options.unitTestRunner === 'vitest',
includeLib: true,
skipFormat: true,
testEnvironment: options.testEnvironment,
});
tasks.push(viteTask);
}
@ -112,6 +113,7 @@ export async function projectGenerator(
uiFramework: 'none',
coverageProvider: 'c8',
skipFormat: true,
testEnvironment: options.testEnvironment,
});
tasks.push(vitestTask);
}

4
packages/js/src/generators/library/schema.json
View File

@ -56,8 +56,8 @@
"testEnvironment": {
"type": "string",
"enum": ["jsdom", "node"],
"description": "The test environment to use if unitTestRunner is set to jest.",
"default": "jsdom"
"description": "The test environment to use if unitTestRunner is set to jest or vitest.",
"default": "node"
},
"pascalCaseFiles": {
"type": "boolean",

2
packages/react/src/generators/library/library.ts
View File

@ -74,6 +74,7 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
includeVitest: options.unitTestRunner === 'vitest',
compiler: options.compiler,
skipFormat: true,
testEnvironment: 'jsdom',
});
tasks.push(viteTask);
} else if (options.buildable && options.bundler === 'rollup') {
@ -122,6 +123,7 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
coverageProvider: 'c8',
inSourceTests: options.inSourceTests,
skipFormat: true,
testEnvironment: 'jsdom',
});
tasks.push(vitestTask);
}

1
packages/vite/src/generators/configuration/configuration.spec.ts
View File

@ -37,6 +37,7 @@ describe('@nx/vite:configuration', () => {
project: 'my-test-react-app',
});
});
it('should add vite packages and react-related dependencies for vite', async () => {
const packageJson = readJson(tree, '/package.json');
expect(packageJson.devDependencies).toMatchObject({

5
packages/vite/src/generators/configuration/configuration.ts
View File

@ -42,6 +42,10 @@ export async function viteConfigurationGenerator(
schema.includeLib ??= projectType === 'library';
// Setting default to jsdom since it is the most common use case (React, Web).
// The @nx/js:lib generator specifically sets this to node to be more generic.
schema.testEnvironment ??= 'jsdom';
/**
* This is for when we are converting an existing project
* to use the vite executors.
@ -153,6 +157,7 @@ export async function viteConfigurationGenerator(
uiFramework: schema.uiFramework,
includeLib: schema.includeLib,
compiler: schema.compiler,
testEnvironment: schema.testEnvironment,
});
tasks.push(initTask);

1
packages/vite/src/generators/configuration/schema.d.ts vendored
View File

@ -10,4 +10,5 @@ export interface ViteConfigurationGeneratorSchema {
serveTarget?: string;
testTarget?: string;
skipFormat?: boolean;
testEnvironment?: 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string;
}

8
packages/vite/src/generators/configuration/schema.json
View File

@ -50,7 +50,7 @@
},
"serveTarget": {
"type": "string",
"description": "The serve target of the project to be transformed to use the @nx/vite:dev-server and @nrwl/vite:preview-server executors."
"description": "The serve target of the project to be transformed to use the @nx/vite:dev-server and @nx/vite:preview-server executors."
},
"testTarget": {
"type": "string",
@ -61,6 +61,12 @@
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"testEnvironment": {
"description": "The vitest environment to use. See https://vitest.dev/config/#environment.",
"type": "string",
"enum": ["node", "jsdom", "happy-dom", "edge-runtime"],
"default": "jsdom"
}
},
"examplesFile": "../../../docs/configuration-examples.md"

56
packages/vite/src/generators/init/__snapshots__/init.spec.ts.snap
View File

@ -11,6 +11,62 @@ exports[`@nx/vite:init dependencies for package.json should add vite packages an
"@vitejs/plugin-react": "^4.0.0",
"@vitest/ui": "^0.32.0",
"existing": "1.0.0",
"prettier": "^2.6.2",
"typescript": "~5.0.2",
"vite": "^4.3.4",
"vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^4.2.0",
"vitest": "^0.32.0",
},
"name": "test-name",
}
`;
exports[`@nx/vite:init dependencies for package.json should support --testEnvironment=edge-runtime 1`] = `
{
"dependencies": {},
"devDependencies": {
"@edge-runtime/vm": "~3.0.2",
"@nx/js": "0.0.1",
"@nx/vite": "0.0.1",
"@vitest/ui": "^0.32.0",
"prettier": "^2.6.2",
"typescript": "~5.0.2",
"vite": "^4.3.4",
"vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^4.2.0",
"vitest": "^0.32.0",
},
"name": "test-name",
}
`;
exports[`@nx/vite:init dependencies for package.json should support --testEnvironment=happy-dom 1`] = `
{
"dependencies": {},
"devDependencies": {
"@nx/js": "0.0.1",
"@nx/vite": "0.0.1",
"@vitest/ui": "^0.32.0",
"happy-dom": "~9.20.3",
"prettier": "^2.6.2",
"typescript": "~5.0.2",
"vite": "^4.3.4",
"vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^4.2.0",
"vitest": "^0.32.0",
},
"name": "test-name",
}
`;
exports[`@nx/vite:init dependencies for package.json should support --testEnvironment=jsdom 1`] = `
{
"dependencies": {},
"devDependencies": {
"@nx/js": "0.0.1",
"@nx/vite": "0.0.1",
"@vitest/ui": "^0.32.0",
"jsdom": "~22.1.0",
"prettier": "^2.6.2",
"typescript": "~5.0.2",

33
packages/vite/src/generators/init/init.spec.ts
View File

@ -33,6 +33,39 @@ describe('@nx/vite:init', () => {
expect(packageJson).toMatchSnapshot();
});
it('should support --testEnvironment=jsdom', async () => {
await initGenerator(tree, {
testEnvironment: 'jsdom',
uiFramework: 'none',
});
const packageJson = readJson(tree, 'package.json');
expect(packageJson).toMatchSnapshot();
});
it('should support --testEnvironment=happy-dom', async () => {
await initGenerator(tree, {
testEnvironment: 'happy-dom',
uiFramework: 'none',
});
const packageJson = readJson(tree, 'package.json');
expect(packageJson).toMatchSnapshot();
});
it('should support --testEnvironment=edge-runtime', async () => {
await initGenerator(tree, {
testEnvironment: 'edge-runtime',
uiFramework: 'none',
});
const packageJson = readJson(tree, 'package.json');
expect(packageJson).toMatchSnapshot();
});
});
describe('vitest targets', () => {

16
packages/vite/src/generators/init/init.ts
View File

@ -1,6 +1,7 @@
import {
addDependenciesToPackageJson,
convertNxGenerator,
logger,
readJson,
readNxJson,
runTasksInSerial,
@ -22,6 +23,8 @@ import {
vitestVersion,
viteTsConfigPathsVersion,
viteVersion,
happyDomVersion,
edgeRuntimeVmVersion,
} from '../../utils/versions';
import { InitGeneratorSchema } from './schema';
@ -39,7 +42,18 @@ function checkDependenciesInstalled(host: Tree, schema: InitGeneratorSchema) {
devDependencies['vite-tsconfig-paths'] = viteTsConfigPathsVersion;
devDependencies['vitest'] = vitestVersion;
devDependencies['@vitest/ui'] = vitestUiVersion;
devDependencies['jsdom'] = jsdomVersion;
if (schema.testEnvironment === 'jsdom') {
devDependencies['jsdom'] = jsdomVersion;
} else if (schema.testEnvironment === 'happy-dom') {
devDependencies['happy-dom'] = happyDomVersion;
} else if (schema.testEnvironment === 'edge-runtime') {
devDependencies['@edge-runtime/vm'] = edgeRuntimeVmVersion;
} else if (schema.testEnvironment !== 'node') {
logger.info(
`A custom environment was provided: ${schema.testEnvironment}. You need to install it manually.`
);
}
if (schema.uiFramework === 'react') {
if (schema.compiler === 'swc') {

1
packages/vite/src/generators/init/schema.d.ts vendored
View File

@ -2,4 +2,5 @@ export interface InitGeneratorSchema {
uiFramework: 'react' | 'none';
compiler?: 'babel' | 'swc';
includeLib?: boolean;
testEnvironment?: 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string;
}

6
packages/vite/src/generators/init/schema.json
View File

@ -22,6 +22,12 @@
"type": "boolean",
"description": "Add dependencies needed to build libraries.",
"default": false
},
"testEnvironment": {
"description": "The vitest environment to use. See https://vitest.dev/config/#environment.",
"type": "string",
"enum": ["node", "jsdom", "happy-dom", "edge-runtime"],
"default": "jsdom"
}
},
"examplesFile": "../../../docs/init-examples.md"

6
packages/vite/src/generators/vitest/__snapshots__/vitest.spec.ts.snap
View File

@ -33,7 +33,7 @@ export default defineConfig({
cache: {
dir: '../../node_modules/.vitest',
},
environment: 'jsdom',
environment: 'node',
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
includeSource: ['src/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
},
@ -71,7 +71,7 @@ export default defineConfig({
cache: {
dir: '../../node_modules/.vitest',
},
environment: 'jsdom',
environment: 'node',
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
},
});
@ -108,7 +108,7 @@ export default defineConfig({
cache: {
dir: '../../node_modules/.vitest',
},
environment: 'jsdom',
environment: 'node',
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
},
});

1
packages/vite/src/generators/vitest/schema.d.ts vendored
View File

@ -6,4 +6,5 @@ export interface VitestGeneratorSchema {
skipViteConfig?: boolean;
testTarget?: string;
skipFormat?: boolean;
testEnvironment?: 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string;
}

5
packages/vite/src/generators/vitest/schema.json
View File

@ -43,6 +43,11 @@
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"testEnvironment": {
"description": "The vitest environment to use. See https://vitest.dev/config/#environment.",
"type": "string",
"enum": ["node", "jsdom", "happy-dom", "edge-runtime"]
}
},
"required": ["project"]

1
packages/vite/src/generators/vitest/vitest-generator.ts
View File

@ -45,6 +45,7 @@ export async function vitestGenerator(
const initTask = await initGenerator(tree, {
uiFramework: schema.uiFramework,
testEnvironment: schema.testEnvironment,
});
tasks.push(initTask);

2
packages/vite/src/utils/generator-utils.ts
View File

@ -538,7 +538,7 @@ export function createOrEditViteConfig(
cache: {
dir: '${offsetFromRoot(projectConfig.root)}node_modules/.vitest'
},
environment: 'jsdom',
environment: '${options.testEnvironment ?? 'node'}',
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
${
options.inSourceTests

2
packages/vite/src/utils/versions.ts
View File

@ -10,6 +10,8 @@ export const vitePluginVueJsxVersion = '^2.1.1';
export const viteTsConfigPathsVersion = '^4.2.0';
export const jsdomVersion = '~22.1.0';
export const vitePluginDtsVersion = '~2.3.0';
export const happyDomVersion = '~9.20.3';
export const edgeRuntimeVmVersion = '~3.0.2';
// Coverage providers
export const vitestCoverageC8Version = '^0.31.0';