Skip to content

Jest Configuration for nx/angular Generators Needs TestEnvironment Node to Run #29664

Closed
@lara-newsom

Description

@lara-newsom

Current Behavior

The default configuration that is scaffolded by the nx/plugin generators does not allow configuration of the testEnvironment. When we extend the nx/angular generators, specifically applicationGenerator and libraryGenerator, the default jest unit tests fail with:

   The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "node" test environment.

Our applicationGenerator is passed the following properties:

	await applicationGenerator(tree, {
		directory,
		name: options.name,
		standaloneConfig: true,
		unitTestRunner: UnitTestRunner.Jest,
		e2eTestRunner: E2eTestRunner.None,
		strict: true,
		style: 'scss',
		linter: 'eslint',
		bundler: 'esbuild',
		addTailwind: false,
		prefix: 'cx',
		tags: 'type:app',
	});

Updating jest.config.ts to set testEnvironment to 'node' resolves the error and does not appear to affect the tests that are not using nx/angular generators. I also observed similar errors for the nx/react application generator.

export default {
	displayName: 'workspace-plugin',
	preset: '../../jest.preset.js',
	transform: {
		'^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
	},
	moduleFileExtensions: ['ts', 'js', 'html'],
	coverageDirectory: '../../coverage/tools/workspace-plugin',
	testEnvironment: 'node',
};

Expected Behavior

The default generated jest.config.ts should be configured to allow all plugin tests to pass without requiring the manual addition of testEnvironment: 'node

GitHub Repo

No response

Steps to Reproduce

  1. create a new Angular workspace with npx create-nx-workspace@latest
  2. Select Jest Unit Test Runner
  3. Add nx/plugin nx add @nx/plugin
  4. Generate new plugin nx g @nx/plugin:plugin my-plugin
  5. Generate new generator npx nx generate @nx/plugin:generator --path=my-plugin/generators/my-generator --description="this is my generator" --no-interactive
  6. Update my-generator to use the nx/angular application generator
export async function myGeneratorGenerator(
  tree: Tree,
  options: MyGeneratorGeneratorSchema
) {
  const directory = `apps/${options.name}`;
  await applicationGenerator(tree, {
		directory,
    e2eTestRunner: E2eTestRunner.None,
	});
  await formatFiles(tree);
}

export default myGeneratorGenerator;
  1. Run the unit tests. The following error is seen
   The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "node" test environment.
  1. add testEnvironment: 'node' to the jest.config.ts file and run the tests again
  2. the tests should pass

Nx Report

Node           : 20.11.0
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 10.2.4

nx                     : 20.3.1
@nx/js                 : 20.3.1
@nx/jest               : 20.3.1
@nx/eslint             : 20.3.1
@nx/workspace          : 20.3.1
@nx/angular            : 20.3.1
@nx/devkit             : 20.3.1
@nx/eslint-plugin      : 20.3.1
@nx/module-federation  : 20.3.1
@nx/playwright         : 20.3.1
@nx/plugin             : 20.3.1
@nx/vite               : 20.3.1
@nx/web                : 20.3.1
@nx/webpack            : 20.3.1
typescript             : 5.6.3
---------------------------------------
Registered Plugins:
@nx/playwright/plugin
@nx/eslint/plugin
---------------------------------------
Community plugins:
angular-eslint : 19.0.2
---------------------------------------
Local workspace plugins:
         @big-test/my-plugin

Failure Logs

my-generator generator
    ✕ should run successfully (153 ms)

  ● my-generator generator › should run successfully

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "node" test environment.
    
    TypeError: setTimeout(...).unref is not a function

      16 | ) {
      17 |   const directory = `apps/${options.name}`;
    > 18 |   await applicationGenerator(tree, {
         |   ^
      19 |              directory,
      20 |     e2eTestRunner: E2eTestRunner.None,
      21 |      });

      at new DelayedSpinner (../node_modules/nx/src/utils/delayed-spinner.js:31:19)
      at DaemonClient.getProjectGraphAndSourceMaps (../node_modules/nx/src/daemon/client/client.js:119:19)
      at createProjectGraphAndSourceMapsAsync (../node_modules/nx/src/project-graph/project-graph.js:230:75)
      at createProjectGraphAsync (../node_modules/nx/src/project-graph/project-graph.js:206:45)
      at initEsLint (../node_modules/@nx/eslint/src/generators/init/init.js:55:62)
      at lintInitGenerator (../node_modules/@nx/eslint/src/generators/init/init.js:94:18)
      at lintProjectGeneratorInternal (../node_modules/@nx/eslint/src/generators/lint-project/lint-project.js:25:57)
      at lintProjectGenerator (../node_modules/@nx/eslint/src/generators/lint-project/lint-project.js:17:12)
      at addLintingGenerator (../node_modules/@nx/angular/src/generators/add-linting/add-linting.js:15:62)
      at addLinting (../node_modules/@nx/angular/src/generators/application/lib/add-linting.js:11:37)
      at applicationGenerator (../node_modules/@nx/angular/src/generators/application/application.js:39:32)
      at async myGeneratorGenerator (my-generator.ts:18:3)
      at async Object.<anonymous> (my-generator.spec.ts:17:7)

Package Manager Version

No response

Operating System

  • macOS
  • Linux
  • Windows
  • Other (Please specify)

Additional Information

I see a similar failure when extending the nx/react application generator, so the fix for the angular generators might need to be applied elsewhere. I have not tested vitest configuration so I am not sure if it suffers from the same issue.

I believe that updating the addJestOptions need to allow the application generator (and likely other generators as well) to pass the testEnvironment property to the jest configurationGenerator

await configurationGenerator(tree, {

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions