Skip to content
Jest snapshot serializer to generate comparable canvas snapshots
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.eslintrc
.gitignore added travis yml and codecov Jan 21, 2018
.npmrc added canvas snapshot serializer Jan 21, 2018
.prettierrc added canvas snapshot serializer Jan 21, 2018
.travis.yml
LICENSE.md added canvas snapshot serializer Jan 21, 2018
README.md updated README Feb 4, 2018
package-lock.json hashing canvas.toDataUrl value to support cross platform Feb 4, 2018
package.json hashing canvas.toDataUrl value to support cross platform Feb 4, 2018

README.md

jest-canvas-snapshot-serializer

build status coverage status

Jest Snapshot Serializer to create comparable snapshots of canvas elements.

Usage

Make sure you're either running jest with environment set to jsdom (default setting) or you have setup jsdom in the test setup file.

Install canvas-prebuilt and this module

npm install --save-dev canvas-prebuilt jest-canvas-snapshot-serializer

and add it as serializer

// myTest.spec.js
import canvasSerializer from "jest-canvas-snapshot-serializer";

expect.addSnapshotSerializer(canvasSerializer);

test("my awesome test", () => {
    const canvas = document.createElement("canvas");

    // canvas must have a width and height attribute
    // otherwise there is no image to serialize
    canvas.setAttribute("width", "200");
    canvas.setAttribute("height", "200");

    drawAwesomeImage(canvas);

    expect(canvas).toMatchSnapshot();
});

Running the test creates a snapshot file like:

exports["my awesome test 1"] = `
<canvas
  width="200"
  height="200"
  data-snapshot-image="51e09c5637c8c4cf463ce0da78329bcca119..."
/>
`

The snapshot now contains a hashed representation of the drawn image. So we're informed about canvas image regressions \o/

Furthermore this serializer will create an image file next to the snapshot file.

.
├── __snapshots__
│   ├── myTest.spec.js.snap
│   ├── myTest.spec.js.snap.my-awesome-test.canvas-image.png
│   └── myTest.spec.js.snap.my-awesome-test.canvas-image.dirty.png
└── myTest.spec.js

There is also a dirty image file if jest is running without --updateSnapshot and the persisted snapshot doesn't match the current implementation. So you can compare the original/persisted image with the current one. The dirty image is deleted as soon as jest updates the snapshot.

FAQ

Why a snapshot serializer instead of a custom matcher like .toMatchCanvasSnapshot?

Using a custom matcher we'd have to implement the same stuff already provided by jest-snapshot (e.g. success and error feedback). Whereas using a serializer we only have to take care about the serialization of the canvas element and writing/deleting the image files.

License

Apache License 2.0

You can’t perform that action at this time.