https://github.com/donysukardi/jest-img-snapshot

Jest matcher for image comparisons using pixelmatch with all the goodness of Jest snapshots out of the box.
https://github.com/donysukardi/jest-img-snapshot

jest snapshot visual-regression

Last synced: 3 months ago
JSON representation

Jest matcher for image comparisons using pixelmatch with all the goodness of Jest snapshots out of the box.

• Host: GitHub
• URL: https://github.com/donysukardi/jest-img-snapshot
• Owner: donysukardi
• License: mit
• Created: 2018-04-25T08:02:09.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-07T08:38:28.000Z (almost 7 years ago)
• Last Synced: 2024-10-31T15:47:10.609Z (4 months ago)
• Topics: jest, snapshot, visual-regression
• Language: JavaScript
• Homepage:
• Size: 538 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-jest - jest-img-snapshot

README

        
# jest-img-snapshot

Jest matcher for image comparisons using [pixelmatch](https://github.com/mapbox/pixelmatch) with all the goodness of Jest snapshots out of the box.

This project was heavily inspired by [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).

## Overview

Internally, it works around Jest's snapshot features by keeping track of snapshot changes using checksum of the serialized image, passing and failing the snapshot tests accordingly according to the image comparison. This means you get interactive update for failing snapshot tests, removal of obsolete snapshots out of the box.

Note that when update flag is not specified and the image comparison falls within the specified threshold, the library will not perform any update and pass the test using the previously stored checksum.

As jest has yet to expose any hooks for obsolete snapshots, this library monkey patches some functions in jest's snapshotState to perform necessary clean up of the image files.

## Usage

1. Extend Jest's `expect` with `toMatchImageSnapshot` exposed by the library

```js

const { toMatchImageSnapshot } = require('jest-image-snapshot');

expect.extend({ toMatchImageSnapshot });

```

2. Or use `configureToMatchImageSnapshot` to specify default configuration (refer to Optional Configuration below for details)

```js

const { configureToMatchImageSnapshot } = require('jest-image-snapshot');

const toMatchImageSnapshot = configureToMatchImageSnapshot({

  customDiffConfig: { threshold: 0.1 },

  noColors: false,

  failureThresholdType: 'percent',

  failureThreshold: 0.01

});

expect.extend({ toMatchImageSnapshot });

```

2. Finally, use `expect(...).toMatchImageSnapshot()` in your tests

```js

it('should match image snapshot', () => {

  // ...

  expect(img).toMatchImageSnapshot();

});

```

### Optional configuration

The following configuration can be passed as object to both `configureToMatchImageSnapshot` as default and `expect(...).toMatchImageSnapshot` as override for particular tests,

* `customDiffConfig`, options passed to [pixelmatch](https://github.com/mapbox/pixelmatch#api). Default: `{ threshold: 0.01 }`

* `noColors`, flag to disable chalk coloring. Default: `false`

* `failureThresholdType`, used in conjuction with `failureThreshold`, options are `pixel` (default) or `percent`

* `failureThreshold`, used in conjunction with `failureThresholdType`, for `percent`, it ranges from 0-1. Default: 0

The following configuration can be used in conjunction with configuration above for `expect(...).toMatchImageSnapshot()` only,

* `name`, custom name for the snapshot, as passed to https://facebook.github.io/jest/docs/en/expect.html#tomatchsnapshotoptionalstring