Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dword-design/expect-mocha-image-snapshot
A wrapper around jest-image-snapshot that makes it compatible to Mocha.
https://github.com/dword-design/expect-mocha-image-snapshot
expect frontend javascript jest jest-image-snapshot mocha puppeteer snapshot-testing test-driven-development testing webdevelopment
Last synced: about 1 month ago
JSON representation
A wrapper around jest-image-snapshot that makes it compatible to Mocha.
- Host: GitHub
- URL: https://github.com/dword-design/expect-mocha-image-snapshot
- Owner: dword-design
- License: other
- Created: 2021-02-27T00:41:07.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-09-15T05:03:25.000Z (2 months ago)
- Last Synced: 2024-09-30T07:40:57.371Z (about 2 months ago)
- Topics: expect, frontend, javascript, jest, jest-image-snapshot, mocha, puppeteer, snapshot-testing, test-driven-development, testing, webdevelopment
- Language: JavaScript
- Homepage:
- Size: 1.44 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://www.npmjs.com/package/expect-mocha-snapshot) that enables snapshot testing with Mocha and [expect](https://www.npmjs.com/package/expect).
This package uses a similar approach to make [jest-image-snapshot](https://www.npmjs.com/package/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](https://www.npmjs.com/package/jest-image-snapshot)):
```js
expect(screenshot).toMatchImageSnapshot(this, { dumpDiffToConsole: true })
```
It is also possible to configure default options (see [jest-image-snapshot docs](https://www.npmjs.com/package/jest-image-snapshot)):
```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](https://github.com/dword-design/expect-mocha-image-snapshot/issues) or a [pull request](https://github.com/dword-design/expect-mocha-image-snapshot/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.
* [jest-image-matcher](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.
* [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)