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

Snapshot Serializers

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

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

Capabilities

HTML Comment Serializer

Serializer for handling HTML comments in Angular component snapshots.

/**
 * Snapshot serializer for HTML comments
 * Provides clean serialization of HTML comment nodes in component snapshots
 */
const htmlCommentSerializer: SnapshotSerializer;

Path: 'jest-preset-angular/build/serializers/html-comment'

Usage Example:

// Automatically included in presets, or manually configure:
module.exports = {
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/html-comment'
  ]
};

Angular Snapshot Serializer

Main serializer for Angular components that provides clean, readable snapshots with customizable attribute handling.

/**
 * Angular component snapshot serializer
 * Handles ComponentFixture instances and provides clean snapshot output
 */
const ngSnapshotSerializer: SnapshotSerializer;

interface NgSnapshotOptions {
  /** Whether to omit all component attributes from snapshots */
  omitAllCompAttrs?: boolean;
}

Path: 'jest-preset-angular/build/serializers/ng-snapshot'

Features:

Serializes Angular ComponentFixture instances
Removes Angular-specific runtime attributes
Provides clean, readable component snapshots
Supports component hierarchy serialization

Usage Examples:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my-component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent]
    });
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(fixture).toMatchSnapshot();
  });
});

No Angular Attributes Serializer

Serializer that removes Angular-specific attributes from DOM snapshots for cleaner output.

/**
 * Serializer that removes Angular-specific attributes
 * Cleans up snapshots by removing runtime Angular attributes
 */
const noNgAttributesSerializer: SnapshotSerializer;

Path: 'jest-preset-angular/build/serializers/no-ng-attributes'

Removed Attributes:

__ngContext__ - Angular runtime context
Angular-specific debug attributes
Runtime binding attributes

Usage Example:

// Automatically included in presets, or manually configure:
module.exports = {
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes'
  ]
};

Serializer Configuration

All serializers are automatically included when using preset functions:

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

// Serializers automatically included
const config = createCjsPreset();

// config.snapshotSerializers includes:
// - 'jest-preset-angular/build/serializers/html-comment'
// - 'jest-preset-angular/build/serializers/ng-snapshot'  
// - 'jest-preset-angular/build/serializers/no-ng-attributes'

Manual Configuration

You can also configure serializers manually if not using presets:

module.exports = {
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/html-comment',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/no-ng-attributes'
  ]
};

Snapshot Output

The serializers work together to provide clean, readable snapshots:

Before (without serializers):

<app-my-component __ngContext__="LContext{...}">
  <!-- Angular comment nodes -->
  <div _ngcontent-c0="" class="container">
    <p _ngcontent-c0="">Hello World</p>
  </div>
</app-my-component>

After (with serializers):

<app-my-component>
  <div class="container">
    <p>Hello World</p>
  </div>
</app-my-component>

Component Fixture Serialization

The ng-snapshot serializer specifically handles Angular ComponentFixture instances:

// Test file
it('should render component', () => {
  fixture.detectChanges();
  expect(fixture).toMatchSnapshot(); // Uses ng-snapshot serializer
});

// Generated snapshot
exports[`MyComponent should render component 1`] = `
<app-my-component>
  <h1>My Component</h1>
  <p>Component content</p>
</app-my-component>
`;

Customization Options

The ng-snapshot serializer supports customization through options:

interface NgSnapshotOptions {
  /** Remove all component attributes from snapshots */
  omitAllCompAttrs?: boolean;
}

These options can be configured through Jest's snapshot serializer configuration if needed for advanced use cases.

Serializer Order

The serializers are applied in the following order:

html-comment - Handles HTML comments
ng-snapshot - Processes Angular components
no-ng-attributes - Cleans up Angular attributes

This order ensures proper processing and clean output for Angular component snapshots.

docs

angular-transformer.md

index.md

preset-configuration.md

setup-environment.md

snapshot-serializers.md

test-environment.md

tile.json

tessl/npm-jest-preset-angular