How to Use jest-image-snapshot in CI

jest-image-snapshot adds a toMatchImageSnapshot matcher that diffs a buffer against a stored image with a configurable failure threshold.

Register the matcher with expect.extend, capture an image buffer, and assert with toMatchImageSnapshot, setting failureThreshold to absorb sub-pixel noise.

Steps

• Install jest-image-snapshot.
• Extend expect with toMatchImageSnapshot.
• Capture a PNG buffer (e.g. via Puppeteer) and assert.
• Set failureThreshold with failureThresholdType: percent.

Test

import { toMatchImageSnapshot } from 'jest-image-snapshot';
expect.extend({ toMatchImageSnapshot });

test('button renders', async () => {
  const image = await page.screenshot();
  expect(image).toMatchImageSnapshot({
    failureThreshold: 0.01,
    failureThresholdType: 'percent',
  });
});

Gotchas

• Baselines land in __image_snapshots__; commit them so CI has a reference.
• A zero threshold makes anti-aliasing differences fail every run on a new OS.

Related guides