@types/jest-image-snapshot

What is @types/jest-image-snapshot?

@types/jest-image-snapshot provides TypeScript type definitions for the jest-image-snapshot package, which is used for image comparison in Jest tests. It allows developers to write tests that compare images to a baseline image and fail if the images do not match within a specified threshold.

What are @types/jest-image-snapshot's main functionalities?

Image Snapshot Testing

This feature allows you to compare an image to a baseline image and fail the test if the images do not match within a specified threshold. The `toMatchImageSnapshot` matcher is used to perform the comparison.

import { toMatchImageSnapshot } from 'jest-image-snapshot';

describe('Image Snapshot Testing', () => {
  it('should match the image snapshot', () => {
    const image = getImageSomehow(); // Replace with actual image retrieval logic
    expect(image).toMatchImageSnapshot();
  });
});

Custom Configuration

This feature allows you to provide custom configuration options for the image comparison, such as setting a different threshold for pixel differences or providing custom diff configurations.

import { toMatchImageSnapshot } from 'jest-image-snapshot';

describe('Custom Configuration', () => {
  it('should match the image snapshot with custom configuration', () => {
    const image = getImageSomehow(); // Replace with actual image retrieval logic
    const customConfig = { threshold: 0.1, customDiffConfig: { threshold: 0.5 } };
    expect(image).toMatchImageSnapshot(customConfig);
  });
});

Update Snapshots

This feature allows you to update the baseline image snapshot if the current image has changed and you want to accept the new image as the baseline.

import { toMatchImageSnapshot } from 'jest-image-snapshot';

describe('Update Snapshots', () => {
  it('should update the image snapshot', () => {
    const image = getImageSomehow(); // Replace with actual image retrieval logic
    expect(image).toMatchImageSnapshot({ updateSnapshot: true });
  });
});

Other packages similar to @types/jest-image-snapshot

jest-screenshot

jest-screenshot is another package for image comparison in Jest tests. It provides similar functionality to jest-image-snapshot but focuses on taking screenshots of web pages and comparing them to baseline images. It is useful for end-to-end testing of web applications.

cypress-image-snapshot

cypress-image-snapshot is a plugin for Cypress that provides image snapshot testing capabilities. It allows you to take screenshots during Cypress tests and compare them to baseline images. This package is useful for end-to-end testing with Cypress, whereas jest-image-snapshot is more suited for unit and integration tests with Jest.

puppeteer-screenshot-tester

puppeteer-screenshot-tester is a package that allows you to take screenshots using Puppeteer and compare them to baseline images. It is useful for testing web pages and web applications by automating browser interactions and capturing screenshots for comparison.

README

Installation

npm install --save @types/jest-image-snapshot

Summary

This package contains type definitions for jest-image-snapshot (https://github.com/americanexpress/jest-image-snapshot#readme).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jest-image-snapshot.

Additional Details

• Last updated: Tue, 12 Dec 2023 15:35:53 GMT
• Dependencies: @types/jest, @types/pixelmatch, ssim.js

Credits

These definitions were written by Janeene Beeforth, erbridge, Piotr Błażejewicz, and Ayc0.