https://github.com/dword-design/jest-image-matcher

A Jest matcher for image comparisons based on pixelmatch. Can also be used with Mocha. Useful for visual regression testing.
https://github.com/dword-design/jest-image-matcher

assert compare comparison expect extend image jest match matcher mocha regression visual

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/dword-design/jest-image-matcher
• Owner: dword-design
• License: other
• Created: 2021-02-20T15:31:01.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-08-22T05:00:21.000Z (3 months ago)
• Last Synced: 2024-10-01T06:30:49.645Z (about 2 months ago)
• Topics: assert, compare, comparison, expect, extend, image, jest, match, matcher, mocha, regression, visual
• Language: JavaScript
• Homepage:
• Size: 1.74 MB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        

# 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](https://www.npmjs.com/package/chai-image). If you want to have snapshot testing, there are packages like [jest-image-snapshot](https://www.npmjs.com/package/jest-image-snapshot).

## Install

```bash

# npm

$ npm install jest-image-matcher

# Yarn

$ yarn add jest-image-matcher

```

## Usage

```js

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:

```js

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

  …

  expect(image).toMatchImage('image.png')

})

```

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

```js

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

  …

  expect(image).toMatchImage('image.png', { diffPath: 'diff.png' })

})

```

Output the base64 diff image for debugging on CI servers:

```js

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

  …

  expect(image).toMatchImage('image.png', { dumpDiffToConsole: true })

})

```

Usage with [puppeteer](https://www.npmjs.com/package/puppeteer):

```js

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](https://github.com/dword-design/jest-image-matcher/issues) or a [pull request](https://github.com/dword-design/jest-image-matcher/pulls)! ⚙️

## 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:



  

    

   If you want to send me a one time donation. The coffee is pretty good 😊.


  

    

   Also for one time donations if you like PayPal.


  

    

   Here you can support me regularly, which is great so I can steadily work on projects.



Thanks a lot for your support! ❤️

## See also

* [output-files](https://github.com/dword-design/output-files): Output a tree of files and directories by providing an object. Especially useful for testing with real files.

* [with-local-tmp-dir](https://github.com/dword-design/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](https://github.com/dword-design/expect-mocha-image-snapshot): A wrapper around jest-image-snapshot that makes it compatible to Mocha.

* [unify-mocha-output](https://github.com/dword-design/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](https://github.com/dword-design/mock-argv): Temporarily overrides the command line arguments. This is useful for testing.

## License

[MIT License](https://opensource.org/licenses/MIT) © [Sebastian Landwehr](https://sebastianlandwehr.com)