How to use jest-specific-snapshot - 5 common examples

// eslint-disable-next-line import/no-extraneous-dependencies
import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
// eslint-disable-next-line import/no-extraneous-dependencies
import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
// eslint-disable-next-line import/no-extraneous-dependencies
import { TestBed } from '@angular/core/testing';
// eslint-disable-next-line import/no-extraneous-dependencies
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
// eslint-disable-next-line import/no-extraneous-dependencies
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { addSerializer } from 'jest-specific-snapshot';
import { initModuleData } from './helpers';

addSerializer(HTMLCommentSerializer);
addSerializer(AngularSnapshotSerializer);

function getRenderedTree(story: any) {
  const currentStory = story.render();

  const { moduleMeta, AppComponent } = initModuleData(currentStory);

  TestBed.configureTestingModule(
    // TODO: take a look at `bootstrap` because it looks it does not exists in TestModuleMetadata
    {
      imports: [...moduleMeta.imports],
      declarations: [...moduleMeta.declarations],
      providers: [...moduleMeta.providers],
      schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
      bootstrap: [...moduleMeta.bootstrap],
    } as any
  );

// eslint-disable-next-line import/no-extraneous-dependencies
import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
// eslint-disable-next-line import/no-extraneous-dependencies
import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
// eslint-disable-next-line import/no-extraneous-dependencies
import { TestBed } from '@angular/core/testing';
// eslint-disable-next-line import/no-extraneous-dependencies
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
// eslint-disable-next-line import/no-extraneous-dependencies
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { addSerializer } from 'jest-specific-snapshot';
import { initModuleData } from './helpers';

addSerializer(HTMLCommentSerializer);
addSerializer(AngularSnapshotSerializer);

function getRenderedTree(story: any) {
  const currentStory = story.render();

  const { moduleMeta, AppComponent } = initModuleData(currentStory);

  TestBed.configureTestingModule(
    // TODO: take a look at `bootstrap` because it looks it does not exists in TestModuleMetadata
    {
      imports: [...moduleMeta.imports],
      declarations: [...moduleMeta.declarations],
      providers: [...moduleMeta.providers],
      schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
      bootstrap: [...moduleMeta.bootstrap],
    } as any

Source code:

${indent(obj.content)}

TypeScript before transform:

${indent(obj.source)}

TypeScript after transform:

${indent(obj.transformed)}

`
};

addSerializer(serializer);

export function expectTransform(transformer: ts.TransformerFactory, filename: string, path: string, outpath: string) {
    const content = fs.readFileSync(path + '/' + filename).toString();
    const sourceFile = ts.createSourceFile(filename, content, ts.ScriptTarget.Latest);
    const source = printer.printFile(sourceFile);
    const transformedFile = ts.transform(sourceFile, [transformer]).transformed[0];
    const transformed = printer.printFile(transformedFile);

    const snapshot: TransformBaseline = {
        type: 'transform-baseline',
        filename,
        content,
        source,
        transformed
    };

Source code:

${indent(obj.content)}

TypeScript before transform:

${indent(obj.source)}

TypeScript after transform:

${indent(obj.transformed)}

`
};

addSerializer(serializer);

export function expectTransform(transformer: ts.TransformerFactory, filename: string, path: string, outpath: string) {
    const content = fs.readFileSync(path + '/' + filename).toString();
    const sourceFile = ts.createSourceFile(filename, content, ts.ScriptTarget.Latest);
    const source = printer.printFile(sourceFile);
    const transformedFile = ts.transform(sourceFile, [transformer]).transformed[0];
    const transformed = printer.printFile(transformedFile);

    const snapshot: TransformBaseline = {
        type: 'transform-baseline',
        filename,
        content,
        source,
        transformed
    };

snapshotSerializers.forEach(serializer => {
      addSerializer(serializer);
      expect.addSnapshotSerializer(serializer);
    });
  }