Test environment

In Jest, a test environment defines the sandbox context in which your tests run. For Angular projects, setting up the correct test environment is essential to ensure compatibility with the framework-specific features, such as dependency injection and change detection.

jest-preset-angular provides utility functions to simplify setting up a Jest test environment tailored for Angular projects. These functions support both zone-based and zoneless environments, catering to different testing needs.

Functions

• setupZoneTestEnv(options)
• setupZonelessTestEnv(options)

---

setupZoneTestEnv(options)

Configures a test environment that uses zone.js, which is the mechanism for tracking asynchronous operations. It is suitable for most Angular applications that rely on zone.js for change detection and other framework features.

You can customize the environment by providing options as function arguments.

Parameters

• options(optional): An object follows TestEnvironmentOptions interface, which allows fine-tuning the environment.

Example:

• Create a Jest setup file:

TypeScript CJS

// setup-jest.ts
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';

setupZoneTestEnv({
  //...options
});

TypeScript ESM

// setup-jest.ts
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';

setupZoneTestEnv({
  //...options
});

• Update your Jest configuration:

TypeScript CJS

// jest.config.ts
import type { Config } from 'jest';

const jestConfig: Config = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

export default jestConfig;

TypeScript ESM

// jest.config.mts
import type { Config } from 'jest';

const jestConfig: Config = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

export default jestConfig;

setupZonelessTestEnv(options)

Configures a test environment that DOESN'T use zone.js, as described in Angular experimental zoneless guide. It is designed for projects that have disabled zone.js, which can lead to improved performance and simplified testing.

important

This function is only supported in Jest ESM mode in Jest 29. Jest 30+ will support to use for CommonJS mode.

You can customize the environment by providing options as function arguments.

Parameters

• options(optional): An object follows TestEnvironmentOptions interface, which allows fine-tuning the environment.

Example:

• Create a Jest setup file:

TypeScript ESM

// setup-jest.ts
import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';

setupZonelessTestEnv({
  //...options
});

• Update your Jest configuration:

TypeScript ESM

// jest.config.mts
import type { Config } from 'jest';

const jestConfig: Config = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

export default jestConfig;