expect-mocha-image-snapshot

src="https://img.shields.io/npm/v/expect-mocha-image-snapshot.svg"
alt="npm version"
>

src="https://github.com/dword-design/expect-mocha-image-snapshot/workflows/build/badge.svg"
alt="Build status"
>

src="https://codecov.io/gh/dword-design/expect-mocha-image-snapshot/branch/master/graph/badge.svg"
alt="Coverage status"
>




src="https://gitpod.io/button/open-in-gitpod.svg"
alt="Open in Gitpod"
width="114"
>

src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg"
alt="Buy Me a Coffee"
width="114"
>

src="https://sebastianlandwehr.com/images/paypal.svg"
alt="PayPal"
width="163"
>

src="https://sebastianlandwehr.com/images/patreon.svg"
alt="Patreon"
width="163"
>

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

``bash


npm

$ npm install expect-mocha-image-snapshot

Yarn

$ yarn add expect-mocha-image-snapshot
`

Usage

`js
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:

`bash
$ mocha
`

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

`bash
$ SNAPSHOT_UPDATE=true mocha
`

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

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

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

`js
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:

src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg"
alt="Buy Me a Coffee"
width="114"
>
 If you want to send me a one time donation. The coffee is pretty good 😊.


src="https://sebastianlandwehr.com/images/paypal.svg"
alt="PayPal"
width="163"
>
 Also for one time donations if you like PayPal.


src="https://sebastianlandwehr.com/images/patreon.svg"
alt="Patreon"
width="163"
>
 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: 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