Our great sponsors
-
-
jest-image-snapshot
✨ Jest matcher for image comparisons. Most commonly used for visual regression testing.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Snapshot testing is a testing mechanism that for long has seemed to be exclusive to Jest. The main idea is to generate expected values into a separate file and to compare the actual tested values with these saved values. It is also possible to update snapshots by passing an environment variable. This testing approach is great for complex data like large strings, DOM content, or images.
Snapshot testing itself is a built-in feature of Jest, and when searching specifically for image snapshots, you'll quickly find jest-image-snapshot, which does great work comparing and updating image snapshots. It also provides convenience features like a base64 diff output, which allows us to view the diff from a CI environment (since the diff image file cannot be saved or viewed).
For simple snapshot testing, there are some options. For Chai users, there is mocha-chai-snapshot. For expect users, there is expect-mocha-snapshot. It basically wraps the jest snapshot logic by injecting an artificial testing context. Big credit to Alexander Beletsky here!
I started to fiddle around with jest-image-snapshot in combination with expect-mocha-snapshot, and it turned out to be way easier than expected to make it Mocha compatible. I put it into its own NPM package, called expect-mocha-image-snapshot. Usage is pretty similar to Jest, you only have to pass the testing context via this. Here is a quick code sample: