jest-image-matcher

A Jest matcher for image comparisons based on pixelmatch. Can also be used with Mocha. Useful for visual regression testing.

This package is solely for image comparisons and is inspired by packages like chai-image. If you want to have snapshot testing, there are packages like jest-image-snapshot.

Install

# npm
$ npm install jest-image-matcher

# Yarn
$ yarn add jest-image-matcher

Usage

import { toMatchImage } from 'jest-image-matcher'
import fs from 'fs'

// register the matcher
expect.extend({ toMatchImage })

it('should match', async () => {
  // get an image from somewhere as a buffer,
  // like reading it from the file system
  const image1 = fs.readFileSync('image1.png')
  const image2 = fs.readFileSync('image2.png')
  expect(image1).toMatchImage(image2)
})

Compare to a file directly:

it('should match', () => {
  …
  expect(image).toMatchImage('image.png')
})

Save the diff to a file if the images do not match:

it('should match', () => {
  …
  expect(image).toMatchImage('image.png', { diffPath: 'diff.png' })
})

Output the base64 diff image for debugging on CI servers:

it('should match', () => {
  …
  expect(image).toMatchImage('image.png', { dumpDiffToConsole: true })
})

Usage with puppeteer:

it('should match', async () => {
  const screenshot = await page.screenshot()
  expect(screenshot).toMatchImage('screenshot.png')
})

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

Thanks a lot for your support! ❤️

See also

• output-files: Output a tree of files and directories by providing an object. Especially useful for testing with real files.
• with-local-tmp-dir: Creates a temporary folder inside cwd, cds inside the folder, runs a function, and removes the folder. Especially useful for testing.
• expect-mocha-image-snapshot: A wrapper around jest-image-snapshot that makes it compatible to Mocha.
• unify-mocha-output: Adjusts a Mocha output so that it is consistent across platforms and can be used for snapshot testing. Basically adjusts the checkmark symbol and removes time values.
• mock-argv: Temporarily overrides the command line arguments. This is useful for testing.

License

MIT License © Sebastian Landwehr