jasmine-angular-snapshot-testing

Angular component snapshot testing for Jasmine

Usage no npm install needed!

<script type="module">
  import jasmineAngularSnapshotTesting from 'https://cdn.skypack.dev/jasmine-angular-snapshot-testing';
</script>

README

angular-snapshot-testing

Angular component snapshot testing for Jasmine

How to Use

  1. Install the extension: Via npm:
npm install jasmine-angular-snapshot-testing --save-dev

Via yarn:

yarn add jasmine-angular-snapshot-testing --dev
  1. Initialize the testing environment This extension requries you to run your unit tests on node instead of in a browser. This requires @angular/platform-server:
import { getTestBed } from '@angular/core/testing';
import { ServerTestingModule, platformServerTesting } from '@angular/platform-server/testing';

getTestBed().initTestEnvironment(
  ServerTestingModule,
  platformServerTesting()
);
  1. Configure the extension: After initializing the test environment initialize the snapshot testing extension:
import { initializeSnapshots } from 'jasmine-angular-snapshot-testing';


initializeSnapshots({
  /**
   * This flag will cause tests to fail if a new snapshot shoudl be generated.
   * Generally, you want to set this value to true when running tests on CI
   * and false when writing new unit tests
   */
  failOnSnapshotDiscovery: false,
  /**
   * This is the file extension that will be appended to the end of test
   * files when generating a snapshot file.
   *
   * For example, if this is set to 'snap' and the spec file is called
   * 'table.component.spec.ts' then the generated file will be called
   * 'table.component.spec.ts.snap'
   */
   fileExtension: 'snap',
   /**
    * This flag will cause new snapshots to overwrite existing snapshots.
    * This is useful during development.
    *
    * Be aware that if this is set to 'true' snapshot tests will never fail.
    */
    discardOldSnapshots: false,
});
  1. Use beforeAll/afterAll hooks to load and save snapshots: This must be done in each spec file:
import * as snapshots from 'jasmine-angular-snapshot-testing';

describe('Table Component', () => {
  beforeAll(() => snapshots.load(module));
  afterAll(() => snapshots.save());
});
  1. Generate snapshots: Use the new toMatchSnapshot() matcher to generate snapshots for any object that implements .toJSON(). Note that this module adds a .toJSON() method to component fixtures:
let fixture: ComponentFixture<TableComponent>;

beforeEach(async(() => {
  TestBed.compileComponents()
    .then(() => {
      fixture = TestBed.createComponent(TableComponent);
      fixture.detectChanges();
    });
}));

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

Caveats

This module has a number of caveats that restrict the type of components that can be tested with snapshots:

  • Unit tests must be run on node instead of a browser. This is a requirement because this extension requires access to the filesystem

  • Components cannot make use of external stylesheets or templates. This is because platform-server does not implement a ResourceLoader, though one may be able to be written.