synyx/jest-canvas-snapshot-serializer

Jest snapshot serializer to generate comparable canvas snapshots

jest-canvas-snapshot-serializer

Jest Snapshot Serializer to create comparable snapshots of canvas elements.

😿 this project is deprecated.

an option may be to use playwright and jest-image-snapshot

• https://playwright.dev/docs/screenshots#element-screenshot

  const screenshot = await page.screenshot();
  expect(screenshot).toMatchImageSnapshot();

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 and this module

npm install --save-dev canvas 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

jest-canvas-snapshot-serializer's Issues

TypeError: prettyFormat is not a function

I just get the following error trying to use this:

TypeError: prettyFormat is not a function
at format (node_modules/jest-canvas-snapshot-serializer/src/canvasSnapshotSerializer.js:3:12)
      at Object.print (node_modules/jest-canvas-snapshot-serializer/src/canvasSnapshotSerializer.js:62:25)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at format (node_modules/pretty-format/build/index.js:561:16)
      at __EXTERNAL_MATCHER_TRAP__ (node_modules/expect/build/index.js:386:30)
      at Object.toMatchSnapshot (node_modules/expect/build/index.js:387:15)
      at Object.<anonymous> (src/components/Plots/Scatter/Scatter/Scatter.unit.js:172:28)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:401:19)

I've tried manually installing pretty-format as a dev dependency afterwards but that didn't fix anything unfortunately.

Cannot read property 'test' of undefined

I've created a chart.js plugin that I now want to test. I'm running this as documented I get the following error:

TypeError: Cannot read property 'test' of undefined

Here is my test:

  let canvas: any;
  beforeEach( () => {
    canvas = document.createElement('canvas');
    canvas.setAttribute('width', '100');
    canvas.setAttribute('height', '100');
  });
  describe( 'plugin', () => {
    it('renders canvas', () => {
      plugins.plugin.beforeDatasetDraw( {
        config: {
          type: 'doughnut'
        },
        outerRadius: 100,
        innerRadius: 80,
        chartArea: {
         right: 100,
         bottom: 100
        },
        ctx: canvas.getContext('2d')
      });
      expect( canvas ).toMatchSnapshot();
    });
  });

The plugin I'm testing:

const plugin = {
  id: 'plugin',
  beforeDatasetDraw: (chart: any) => {
    if (chart.config.type === 'doughnut') {
      const ctx = chart.ctx;
      ctx.beginPath();
      ctx.strokeStyle = '#D2D2D2';
      ctx.arc(
        chart.chartArea.right / 2,
        chart.chartArea.bottom / 2,
        (chart.outerRadius + chart.innerRadius) / 2,
        0,
        2 * Math.PI
      );
      ctx.stroke();
    }
  }
};

Use `getImageData` instead of `toDataURL` to compare snapshots

It looks like the result of Canvas#toDataURL depends on the platform. Tests that pass on my Mac, fail on TravisCI - see Automattic/node-canvas#853. Maybe it would be better to use something that returns raw image data, like Canvas#getImageData, rather than a compressed image?

Hashing doesn't work

According to the documentation the snapshot should contain a hash, but when I try the example this is my result:

<canvas
  data-snapshot-image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAA6e...[FULL_BASE_64]"
  height="200"
  width="200"
/>

My test code:

import canvasSerializer from 'jest-canvas-snapshot-serializer';
expect.addSnapshotSerializer(canvasSerializer);

it('works with canvas', () => {
    const canvas = createCanvas('#000', '#F00'); // function from your example.
    expect(canvas).toMatchSnapshot();
  });

Am I missing something?

canvas-prebuilt dependency should just be canvas

The Readme says to run:

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

This should now just be:

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