Snapshot testing

jest-preset-angular provides several snapshot serializers to generate clearer and more human-readable snapshot.

info

BY DEFAULT, the preset provides all of the snapshot serializers below.

Snapshot serializers

• Remove html comments (html-comment)
• Display component HTML (ng-snapshot)
• Remove Angular attributes (no-ng-attributes)

---

Reference

Remove html comments (html-comment)

Allow removing all the comments in the component HTML in snapshot.

Examples:

In Jest config

JavaScript

jest.config.js

/** @type {import('jest').Config} */
module.exports = {
  //[...]
  snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],
  //[...]
};

TypeScript

jest.config.ts

import type { Config } from 'jest';

const jestConfig: Config = {
  //[...]
  snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],
  //[...]
};

export default jestConfig;

Or in setup test environment file

JavaScript

jest.config.js

/** @type {import('jest').Config} */
module.exports = {
  //[...]
  setupFilesAfterEnv: ['./setup-jest.js'],
  //[...]
};

setup-jest.js

const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');

expect.addSnapshotSerializer(removeHtmlCommentsSerializer);

TypeScript

jest.config.ts

import type { Config } from 'jest';

const jestConfig: Config = {
  //[...]
  setupFilesAfterEnv: ['./setup-jest.ts'],
  //[...]
};

setup-jest.ts

import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';

expect.addSnapshotSerializer(removeHtmlCommentsSerializer);

Or in individual test files

JavaScript

foo.component.spec.js

const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');

expect.addSnapshotSerializer(removeHtmlCommentsSerializer);

it('should work', () => {
  //[...]
});

TypeScript

foo.component.spec.ts

import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';

expect.addSnapshotSerializer(removeHtmlCommentsSerializer);

it('should work', () => {
  //[...]
});

Display component HTML (ng-snapshot)

Allow displaying component HTML with data in snapshot.

Configuration options

type NgSnapshotOptions = {
  omitAllCompAttrs?: boolean;
};

Configure snapshot behavior

Examples:

In Jest config

JavaScript

jest.config.js

/** @type {import('jest').Config} */
module.exports = {
  //[...]
  snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],
  //[...]
};

TypeScript

jest.config.ts

import type { Config } from 'jest';

const jestConfig: Config = {
  //[...]
  snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],
  //[...]
};

export default jestConfig;

Or in setup test environment file

JavaScript

jest.config.js

/** @type {import('jest').Config} */
module.exports = {
  //[...]
  setupFilesAfterEnv: ['./setup-jest.js'],
  //[...]
};

setup-jest.js

const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');

expect.addSnapshotSerializer(componentSnapshotSerializer);

TypeScript

jest.config.ts

import type { Config } from 'jest';

const jestConfig: Config = {
  //[...]
  setupFilesAfterEnv: ['./setup-jest.ts'],
  //[...]
};

setup-jest.ts

import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';

expect.addSnapshotSerializer(componentSnapshotSerializer);

Or in individual test files

JavaScript

foo.component.spec.js

const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');

expect.addSnapshotSerializer(componentSnapshotSerializer);

it('should work', () => {
  //[...]
});

TypeScript

foo.component.spec.ts

import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';

expect.addSnapshotSerializer(componentSnapshotSerializer);

it('should work', () => {
  //[...]
});

With options

Effective priority

The configured serializers will have affect in this order:

Jest config -> setup files -> test files

The later the higher priority. This means that with the same serializer, the later one will override the configuration of the previous one in the chain.

• In setup files:

JavaScript

jest.config.js

/** @type {import('jest').Config} */
module.exports = {
  //[...]
  setupFilesAfterEnv: ['./setup-jest.js'],
  //[...]
};

setup-jest.js

const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');

expect.addSnapshotSerializer({
  print: (val, print, indent, options, colors) =>
    componentSnapshotSerializer.print(
      val,
      print,
      indent,
      {
        ...options,
        omitAllCompAttrs: true,
      },
      colors,
    ),
  test: componentSnapshotSerializer.test,
});

TypeScript

jest.config.ts

import type { Config } from 'jest';

const jestConfig: Config = {
  //[...]
  setupFilesAfterEnv: ['./setup-jest.ts'],
  //[...]
};

setup-jest.ts

import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';

expect.addSnapshotSerializer({
  print: (val, print, indent, options, colors) =>
    componentSnapshotSerializer.print(
      val,
      print,
      indent,
      {
        ...options,
        omitAllCompAttrs: true,
      },
      colors,
    ),
  test: componentSnapshotSerializer.test,
});

• or in individual test files:

JavaScript

foo.component.spec.js

const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');

expect.addSnapshotSerializer({
  print: (val, print, indent, options, colors) =>
    componentSnapshotSerializer.print(
      val,
      print,
      indent,
      {
        ...options,
        omitAllCompAttrs: true,
      },
      colors,
    ),
  test: componentSnapshotSerializer.test,
});

it('should work', () => {
  //[...]
});

TypeScript

foo.component.spec.ts

import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';

expect.addSnapshotSerializer({
  print: (val, print, indent, options, colors) =>
    componentSnapshotSerializer.print(
      val,
      print,
      indent,
      {
        ...options,
        omitAllCompAttrs: true,
      },
      colors,
    ),
  test: componentSnapshotSerializer.test,
});

it('should work', () => {
  //[...]
});

Remove Angular attributes (no-ng-attributes)

Allow removing attributes generated by Angular fixture, like ng-reflect-*, ng-version="*", _ngcontent-c* etc., from component snapshot

Examples:

In Jest config

JavaScript

jest.config.js

/** @type {import('jest').Config} */
module.exports = {
  //[...]
  snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],
  //[...]
};

TypeScript

jest.config.ts

import type { Config } from 'jest';

const jestConfig: Config = {
  //[...]
  snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],
  //[...]
};

export default jestConfig;

Or in setup test environment file

JavaScript

jest.config.js

/** @type {import('jest').Config} */
module.exports = {
  //[...]
  setupFilesAfterEnv: ['./setup-jest.js'],
  //[...]
};

setup-jest.js

const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');

expect.addSnapshotSerializer(removeNgAttributes);

TypeScript

jest.config.ts

import type { Config } from 'jest';

const jestConfig: Config = {
  //[...]
  setupFilesAfterEnv: ['./setup-jest.ts'],
  //[...]
};

setup-jest.ts

import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';

expect.addSnapshotSerializer(removeNgAttributes);

Or in individual test files

JavaScript

foo.component.spec.js

const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');

expect.addSnapshotSerializer(removeNgAttributes);

it('should work', () => {
  //[...]
});

TypeScript

foo.component.spec.ts

import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';

expect.addSnapshotSerializer(removeNgAttributes);

it('should work', () => {
  //[...]
});