Test Environment

Custom JSDOM environment optimized for Angular testing with proper global setup and Angular-specific configurations.

Capabilities

JestJSDOMEnvironment Class

Custom Jest environment that extends the abstract JSDOM environment with Angular-specific optimizations and JSDOM integration.

/**
 * Custom JSDOM environment for Angular testing
 * Extends Jest's abstract JSDOM environment with Angular optimizations
 */
class JestJSDOMEnvironment extends BaseEnv {
  /**
   * Creates a new JestJSDOMEnvironment instance
   * @param config - Jest environment configuration
   * @param context - Environment context from Jest
   */
  constructor(config: JestEnvironmentConfig, context: EnvironmentContext);
}

interface JestEnvironmentConfig {
  projectConfig: Config.ProjectConfig;
  globalConfig: Config.GlobalConfig;
}

interface EnvironmentContext {
  console: Console;
  docblockPragmas: Record<string, string | string[]>;
  testPath: string;
}

interface BaseEnv {
  constructor(config: JestEnvironmentConfig, context: EnvironmentContext, jsdom: any);
  global: any;
  moduleMocker: any;
  fakeTimers: any;
  setup(): Promise<void>;
  teardown(): Promise<void>;
  runScript(script: any): any;
}

Usage Examples:

// jest.config.js - Using the custom environment
module.exports = {
  testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',
  // other configuration...
};

// Or in preset configuration
const { createCjsPreset } = require('jest-preset-angular/presets');

module.exports = createCjsPreset({
  testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env'
});

Environment Features

JSDOM Integration:

• Uses the latest JSDOM version for DOM simulation
• Provides browser-like environment for Angular components
• Supports DOM manipulation and events

Angular Optimizations:

• Pre-configured for Angular testing requirements
• Handles Angular's zone.js integration
• Supports Angular's change detection in tests

Debugging Support:

• Logs JSDOM version information for debugging
• Integrates with ts-jest logging system
• Provides detailed error reporting

Environment Types

The package provides environment type definitions for configuration:

type JSDOMEnvironment = 'jsdom' | 'jest-preset-angular/environments/jest-jsdom-env';

Available Environments:

• 'jsdom': Standard Jest JSDOM environment
• 'jest-preset-angular/environments/jest-jsdom-env': Custom Angular-optimized environment

Configuration in Presets

The environment is automatically configured when using preset functions:

// Default environment (jsdom)
const config = createCjsPreset();

// Custom Angular environment
const config = createCjsPreset({
  testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env'
});

Environment Context

The environment provides proper context for Angular testing:

Global Objects:

• window object with DOM APIs
• document object for DOM manipulation
• navigator object for browser simulation

Angular Integration:

• Proper this context for component testing
• Support for Angular's dependency injection
• Integration with Angular testing utilities

Browser Simulation

The environment simulates browser features needed for Angular:

DOM APIs:

• Element creation and manipulation
• Event handling and propagation
• CSS selector queries

Browser Features:

• LocalStorage and SessionStorage
• History API for routing tests
• Fetch API for HTTP testing

Performance:

• Optimized for test execution speed
• Minimal overhead for simple tests
• Efficient memory usage

Compatibility

The environment is compatible with:

Angular Versions:

• Angular 18+
• Angular 19+
• Angular 20+

Node.js Versions:

• Node.js 18.19.1+
• Node.js 20.11.1+
• Node.js 22.0.0+

Jest Versions:

• Jest 30.0.0+

Environment Setup

The environment automatically handles setup required for Angular testing without additional configuration:

// No manual setup required - environment handles:
// - JSDOM initialization
// - Angular testing utilities setup
// - Zone.js configuration
// - Error handling setup