expect-mocha-image-snapshot

A wrapper around jest-image-snapshot that makes it compatible to Mocha.

Snapshot testing is very Jest-centered. There are not too many solutions for other testing frameworks to test against snapshots. Even less for image snapshots. There is expect-mocha-snapshot that enables snapshot testing with Mocha and expect.

This package uses a similar approach to make jest-image-snapshot Mocha compatible, allowing Mocha users to do image snapshot testing.

Install

# npm
$ npm install expect-mocha-image-snapshot

# Yarn
$ yarn add expect-mocha-image-snapshot

Usage

import expect from 'expect'
import { toMatchImageSnapshot } from 'expect-mocha-image-snapshot'

expect.extend({ toMatchImageSnapshot })

it('works', async function () {
  ...
  const screenshot = await puppeteer.screenshot()
  expect(screenshot).toMatchImageSnapshot(this) // this is important here
});

Note that it is important to pass this to the matcher because it contains the test metadata.

Now you can run mocha as usual:

$ mocha

To update existing snapshots, pass the environment variable SNAPSHOT_UPDATE into the process:

$ SNAPSHOT_UPDATE=true mocha

Additional options can be passed as a second argument (see jest-image-snapshot docs):

expect(screenshot).toMatchImageSnapshot(this, { dumpDiffToConsole: true })

It is also possible to configure default options (see jest-image-snapshot docs):

import { configureToMatchImageSnapshot } from 'expect-mocha-image-snapshot'

expect.extend({
  toMatchImageSnapshot: configureToMatchImageSnapshot({
    customSnapshotsDir: '__foo_image_snapshots__',
  }),
})

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.
• jest-image-matcher: A Jest matcher for image comparisons based on pixelmatch. Can also be used with Mocha. Useful for visual regression testing.
• 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