or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

angular-transformer.mdindex.mdpreset-configuration.mdsetup-environment.mdsnapshot-serializers.mdtest-environment.md
tile.json

tessl/npm-jest-preset-angular

Jest preset configuration for Angular projects

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/jest-preset-angular@15.0.x

To install, run

npx @tessl/cli install tessl/npm-jest-preset-angular@15.0.0

index.mddocs/

Jest Preset Angular

Jest Preset Angular is a comprehensive Jest preset configuration specifically designed for Angular projects, enabling developers to efficiently set up and run unit tests in Angular applications. It provides seamless integration with TypeScript, Angular-specific transformations, and optimized test configurations that handle Angular's unique compilation and module loading requirements.

Package Information

  • Package Name: jest-preset-angular
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev jest-preset-angular

Core Imports

import { createCjsPreset, createEsmPreset } from 'jest-preset-angular/presets';

For the transformer:

import jestPresetAngular from 'jest-preset-angular';
const transformer = jestPresetAngular.createTransformer();

For CommonJS (jest.config.js):

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

Basic Usage

Simple CJS Configuration

// jest.config.js
const { createCjsPreset } = require('jest-preset-angular/presets');

module.exports = createCjsPreset({
  tsconfig: '<rootDir>/tsconfig.spec.json'
});

Simple ESM Configuration

// jest.config.mjs
import { createEsmPreset } from 'jest-preset-angular/presets';

export default createEsmPreset({
  tsconfig: '<rootDir>/tsconfig.spec.json'
});

Traditional Preset Usage

// jest.config.js
module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts']
};

Architecture

Jest Preset Angular is built around several key components:

  • Preset Factories: Functions (createCjsPreset, createEsmPreset) that generate complete Jest configurations for different module systems
  • Custom Transformer: NgJestTransformer class that extends ts-jest to handle Angular-specific compilation needs
  • Angular Compiler Integration: NgJestCompiler that processes Angular decorators, templates, and styles
  • Configuration Management: NgJestConfig that handles Angular-specific TypeScript and Jest settings
  • Snapshot Serializers: Built-in serializers for clean Angular component snapshots
  • Custom Environment: JSDOM environment optimized for Angular testing

Capabilities

Jest Preset Configuration

Core preset creation functions that generate complete Jest configurations optimized for Angular projects with different module systems and environments.

function createCjsPreset(options?: CjsPresetOptionsType): CjsPresetType;
function createEsmPreset(options?: EsmPresetOptionsType): EsmPresetType;

interface CjsPresetOptionsType {
  tsconfig?: TsJestTransformerOptions['tsconfig'];
  astTransformers?: TsJestTransformerOptions['astTransformers'];
  babelConfig?: TsJestTransformerOptions['babelConfig'];
  diagnostics?: TsJestTransformerOptions['diagnostics'];
  testEnvironment?: JSDOMEnvironment;
}

interface EsmPresetOptionsType {
  tsconfig?: TsJestTransformerOptions['tsconfig'];
  astTransformers?: TsJestTransformerOptions['astTransformers'];
  babelConfig?: TsJestTransformerOptions['babelConfig'];
  diagnostics?: TsJestTransformerOptions['diagnostics'];
  testEnvironment?: JSDOMEnvironment;
}

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

Preset Configuration

Angular Transformer

Custom Jest transformer that handles Angular-specific compilation including component templates, styles, decorators, and TypeScript compilation with Angular compiler integration.

class NgJestTransformer extends TsJestTransformer {
  constructor(tsJestConfig?: TsJestTransformerOptions);
  process(
    fileContent: string,
    filePath: string,
    transformOptions: TsJestTransformOptions
  ): TransformedSource;
}

function createTransformer(tsJestConfig?: TsJestTransformerOptions): NgJestTransformer;

Angular Transformer

Test Environment

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

class JestJSDOMEnvironment extends BaseEnv {
  constructor(config: JestEnvironmentConfig, context: EnvironmentContext);
}

Test Environment

Test Environment Setup

Functions for setting up Angular testing environments with proper TestBed configuration and zone handling.

function setupZoneTestEnv(options?: TestEnvironmentOptions): void;
function setupZonelessTestEnv(options?: TestEnvironmentOptions): void;

Setup Environment

Snapshot Serializers

Built-in snapshot serializers for clean, readable Angular component test snapshots with Angular-specific attribute handling.

interface NgSnapshotOptions {
  omitAllCompAttrs?: boolean;
}

Snapshot Serializers

Types

interface TsJestTransformOptions {
  config?: {
    [key: string]: any;
    globals?: {
      ngJest?: NgJestGlobalConfig;
    };
  };
  supportsStaticESM?: boolean;
}

interface NgJestGlobalConfig {
  skipNgcc?: boolean;
  tsconfig?: string;
  testEnvironmentOptions?: TestEnvironmentOptions;
  processWithEsbuild?: string[];
}

interface TestEnvironmentOptions {
  [key: string]: any;
}

interface TransformedSource {
  code: string;
  map?: string | object;
}

interface SnapshotSerializer {
  serialize(val: any, config: any, indentation: string, depth: number, refs: any, printer: any): string;
  test(val: any): boolean;
}

type TsJestTransformerOptions = {
  tsconfig?: string | object;
  astTransformers?: object;
  babelConfig?: object;
  diagnostics?: object;
  isolatedModules?: boolean;
  stringifyContentPathRegex?: string;
  useESM?: boolean;
};

type CjsPresetType = Config & {
  transformIgnorePatterns: string[];
  transform: Record<string, any>;
};

type EsmPresetType = Config & {
  extensionsToTreatAsEsm: string[];
  moduleNameMapper: Record<string, string>;
  transformIgnorePatterns: string[];
  transform: Record<string, any>;
};

interface Config {
  testEnvironment?: string;
  moduleFileExtensions?: string[];
  snapshotSerializers?: string[];
  preset?: string;
  setupFilesAfterEnv?: 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;
}

interface JestEnvironmentConfig {
  projectConfig: any;
  globalConfig: any;
}

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

interface TsJestTransformer {
  constructor(tsJestConfig?: TsJestTransformerOptions);
  process(fileContent: string, filePath: string, transformOptions: TsJestTransformOptions): TransformedSource;
  getCacheKey(fileContent: string, filePath: string, transformOptions: TsJestTransformOptions): string;
}