tessl/npm-jest-preset-angular

Jest preset configuration for Angular projects

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Jest Preset Configuration

Name: tessl/npm-jest-preset-angular
Author: tessl

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

Capabilities

createCjsPreset Function

Creates a Jest preset configuration optimized for CommonJS module system with Angular-specific transformations and settings.

/**
 * Creates a Jest preset configuration for CommonJS modules
 * @param options - Optional configuration options for the preset
 * @returns Complete Jest configuration object for CommonJS projects
 */
function createCjsPreset(options?: CjsPresetOptionsType): CjsPresetType;

interface CjsPresetOptionsType {
  /** TypeScript configuration file path or options */
  tsconfig?: TsJestTransformerOptions['tsconfig'];
  /** AST transformers for custom TypeScript transformations */
  astTransformers?: TsJestTransformerOptions['astTransformers'];
  /** Babel configuration for additional transformations */
  babelConfig?: TsJestTransformerOptions['babelConfig'];
  /** TypeScript diagnostic options */
  diagnostics?: TsJestTransformerOptions['diagnostics'];
  /** Test environment configuration */
  testEnvironment?: JSDOMEnvironment;
}

type CjsPresetType = BasePresetConfig & Required<Pick<Config, 'transformIgnorePatterns' | 'transform'>>;

Usage Examples:

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

// Basic configuration
module.exports = createCjsPreset();

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

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

// Full configuration
module.exports = createCjsPreset({
  tsconfig: {
    tsconfig: '<rootDir>/tsconfig.spec.json',
    isolatedModules: true
  },
  diagnostics: {
    warnOnly: true
  },
  testEnvironment: 'jsdom'
});

createEsmPreset Function

Creates a Jest preset configuration optimized for ECMAScript modules with Angular-specific transformations and ESM support.

/**
 * Creates a Jest preset configuration for ECMAScript modules
 * @param options - Optional configuration options for the preset
 * @returns Complete Jest configuration object for ESM projects
 */
function createEsmPreset(options?: EsmPresetOptionsType): EsmPresetType;

interface EsmPresetOptionsType {
  /** TypeScript configuration file path or options */
  tsconfig?: TsJestTransformerOptions['tsconfig'];
  /** AST transformers for custom TypeScript transformations */
  astTransformers?: TsJestTransformerOptions['astTransformers'];
  /** Babel configuration for additional transformations */
  babelConfig?: TsJestTransformerOptions['babelConfig'];
  /** TypeScript diagnostic options */
  diagnostics?: TsJestTransformerOptions['diagnostics'];
  /** Test environment configuration */
  testEnvironment?: JSDOMEnvironment;
}

type EsmPresetType = BasePresetConfig & 
  Required<Pick<Config, 'extensionsToTreatAsEsm' | 'moduleNameMapper' | 'transformIgnorePatterns' | 'transform'>>;

Usage Examples:

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

// Basic ESM configuration
export default createEsmPreset();

// With custom options
export default createEsmPreset({
  tsconfig: '<rootDir>/tsconfig.spec.json',
  testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env'
});

Base Preset Configuration

Shared configuration object used by both CJS and ESM presets.

interface BasePresetConfig {
  testEnvironment: JSDOMEnvironment;
  moduleFileExtensions: Config['moduleFileExtensions'];
  snapshotSerializers: Config['snapshotSerializers'];
}

const basePresetConfig: BasePresetConfig = {
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/html-comment',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/no-ng-attributes'
  ]
};

interface Config {
  testEnvironment?: string;
  moduleFileExtensions?: string[];
  snapshotSerializers?: string[];
  transformIgnorePatterns?: string[];
  transform?: Record<string, any>;
  extensionsToTreatAsEsm?: string[];
  moduleNameMapper?: Record<string, string>;
}

Environment Types

Available test environment options for Angular testing.

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

The preset supports two JSDOM environments:

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

Configuration Differences

CommonJS Preset Features:

Transform ignore patterns: ['node_modules/(?!(.*\\.mjs$|@angular/common/locales/.*\\.js$))']
Standard transform configuration for TypeScript, JavaScript, HTML, and SVG files

ESM Preset Features:

Extensions treated as ESM: ['.ts']
Module name mapper for tslib: { tslib: 'tslib/tslib.es6.js' }
Transform ignore patterns: ['node_modules/(?!tslib)']
ESM-specific transform configuration with useESM: true

Traditional Preset Usage

Alternative configuration method using Jest's built-in preset system for simpler setup.

/**
 * Traditional Jest preset configuration
 * Uses the default CJS preset with standard Jest configuration
 */
interface TraditionalPresetConfig {
  preset: 'jest-preset-angular';
  setupFilesAfterEnv?: string[];
  testEnvironment?: string;
}

Usage Examples:

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

// With custom test environment
module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env'
};

// With additional Jest options
module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  collectCoverageFrom: [
    'src/**/*.{ts,js}',
    '!src/**/*.spec.ts',
    '!src/main.ts',
    '!src/polyfills.ts'
  ],
  coverageDirectory: 'coverage',
  coverageReporters: ['html', 'text-summary', 'cobertura']
};

Traditional vs Factory Function Approach:

// Traditional preset (uses default CJS configuration)
module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts']
};

// Factory function approach (more control)
const { createCjsPreset } = require('jest-preset-angular/presets');

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

Benefits of Traditional Preset:

Simpler configuration for basic use cases
Familiar Jest preset syntax
Automatically applies default Angular testing configuration
Compatible with standard Jest tooling and IDE integrations

Benefits of Factory Functions:

More granular control over configuration
Explicit ESM vs CJS module system selection
Customizable TypeScript and diagnostic options
Better for complex or non-standard setups

Setup File Integration

Both traditional and factory function approaches require setup files for Angular TestBed initialization:

// setup-jest.ts (for zone-based apps)
import 'jest-preset-angular/setup-env/zone';

// setup-jest.ts (for zoneless apps)
import 'jest-preset-angular/setup-env/zoneless';

Configuration:

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

// Or with factory function
const config = createCjsPreset();
config.setupFilesAfterEnv = ['<rootDir>/setup-jest.ts'];
module.exports = config;