Solvedjest image snapshot Question: how are people storing their snapshot images?

I've been using jest-image-snapshot for a while, and I started out storing my snapshots as checked in assets in git, just like I do with my JS jest snapshots. This works great.

However, now that I've got a few hundred snapshot images and they all get updated semi-frequently as UI changes in the app occur, my Git repo is starting to get pretty huge. The historic screenshot files that are in the git repo going back to my first commits aren't really very useful, but they're taking up a bunch of space.

I'm guessing other people must be dealing with this issue too, how are you solving it? Do use some script to store the snapshots externally from your git repo and then .gitignore them? Do you use git-filter-branch to rip out the old snapshots on a periodic schedule? Do you use some other smart way to manage these large binary files?

19 Answers

βœ”οΈAccepted Answer

@itaylor have you considered using LFS to manage your image snapshots?

Other Answers:

I've done a POC with Git LFS and it works well. Unfortunately, the company I work at uses Gitlab, and we're not on the newest version and there are incompatibilities with the latest Git LFS versions. I was able to work around this issue by using an older version of Git LFS client 2.4.2 instead of the latest 2.5.1. After jumping that hurdle, using Git LFS was pretty much seamless. My screenshots are no longer being stored inside of the repository, but they're still tracked there, and when I git checkout a branch it goes and fetches them then. When I get a chance I'll make a PR to the docs of this project recommending using Git LFS for those concerned with large repositories.

I've not heard back from many of you, so I've been thinking about this some more, as it seems like it might be a problem that hasn't been solved yet. πŸ˜„

Here's an idea that would address this problem.
Right now we do a pixelmatch for each image, comparing the stored snapshot image which lives in the file system (presumably checked in to source control) with the new image.

What if, instead of storing the whole image in the snapshot, we instead stored a SHA hash of the image as the snapshot, and uploaded the actual snapshot image to some file store (like S3 or something like it) with the hash as the filename of the image. Then when comparing images, we would look at the new image, take its hash, if the hash matches, then the image is the same, and the assertion passes. If the hashes don't match, we go and download the old image (we know it's file name because we know its hash) and run pixelmatch to generate the difference image. The functionality would be pretty much the same, but the snapshots we'd store in our source control systems would just be the hashes, taking up very little space, and the snapshot files themselves could then be managed and deleted however needed, outside of source control.

Any thoughts about this idea?

@10xLaCroixDrinker Thanks for the tip on LFS!

I've been using Git daily for about a decade, but somehow I hadn't heard of LFS, and yes, after a cursory look at the docs, it seems like it should completely solve my issues with being able to effectively store large amounts of large screenshot files in the Git repo!

It's seems to be basically the same idea I suggested, using the filename as the hash, uploading the file to a file store and then just storing the hash in the repo, except it's built in to Git and has been fully supported by major Git repositories like Github/Gitlab/Bitbucket for a few years now πŸ˜ƒ. I'll give it a try sometime over the next week or so and report back if it works for me. If it does work well, then maybe we could just add a couple of lines to the file suggesting using it and we can close this ticket.

Related Issues:

jest image snapshot Question: how are people storing their snapshot images?
@itaylor have you considered using LFS to manage your image snapshots? I've been using jest-image-sn...
enzyme Where do I put setupTests file
Hey @iiison jest will handle requiring the file for each test if you tell it where this file lives ...
react native template typescript can not run npx react-native init MyApp --template react-native-template-typescript
Just remember to npm uninstall -g react-native-cli and yarn global add @react-native-community/cli s...
enzyme Assertion based on attribute or get attribute from element.
Ohhh @ljharb it works thanks I don't require a filter it works with prop because I only have one ima...
enzyme How to change a checkbox value using simulate api?
@bboysathish calling .simulate('change') doesn't change the value though - have you tried .simulate(...
arc Fixing the linebreak-style eslint error for Windows
You can also run npm run lint -- --fix to get rid of current CRLF You might also be interested on a ...
enzyme Node v10.0.0 error Found incompatible module, upath@1.0.4: The engine "node" is incompatible with this module. Expected version ">=4 <=9"
@kahboom @jhbsk Here is a trick I learned recently: Find in yarn.lock and remove it manually Just th...
enzyme It looks like you called mount() without a global document being loaded.
Then : Without need of adding code in beforeEach and afterEach. I get the following error trying to ...
enzyme Enzyme + jsdom -> TypeError: jsdom is not a function
Got it to work with jsdom@11.1.0 and enzyme@2.9.1 as follows: I am trying to get Enzyme up and runni...
ts jest Jest encountered an unexpected token
@mohsinulhaq I was able to fix the error similiar to yours by changing jsx property of tsconfig.json...
ts jest jest.mock() makes module undefined when importing it no matter what we return in factory function
Ok I have a solution (actually my genius coworker @junseld found it) ./src/StatelessComponent.tsx ./...
ts jest jest.mock doesn't modify the type of the mocked class
I fell down an internet hole for hours trying to figure this one out Glad I found this thread! For a...
ts jest Support for imports with absolute path
I don't see anywhere this module passing options to jest-resolve Putting the extra moduleDirectories...
enzyme Testing a Redux-connected component using Enzyme
and then make your assertions on the wrapped component. Enzyme i) What is the least error-prone way ...
enzyme Testing select changes?
We have just been facing a similar issue We found an existing issue: #218 It seems the correct way w...
ts jest Curious behavior with --no-cache option and ts imports from node_modules
@alfaproject Ran into this error as well We're importing modules from another project which did not ...
enzyme selector on key-prop doesnt return any matches.
As someone who has read the React docs and worked with it extensively Either its a bug or it probabl...
enzyme Mounted wrapper was not wrapped in act(...) warning
Using TS-- an even simpler version of @SenP 's solution if you don't need to interact with the page ...
enzyme enzyme_adapter_react_16_1.default is not a constructor
Based on the above answers what i did to solve this is: yarn add --dev types/enzyme-adapter-react-16...
enzyme New memo feature from React 16.6 is not supported
Temporal workaround with jest.. :/ cc @asdelday Current behavior Shallow render will fail with error...
ts jest ts-jest cant find jest typings
Main issue is that you changed typeRoots in your tsconfig which by default is node_modules/@types So...
enzyme ReactWrapper::setState() can only be called on the root
Anyway I still think that allowing client to call setState() on child element is a must have in the ...
ts jest ts-jest 26.1.2 - "cannot find source file"
yes running jest --clearCache allows the test to pass but then changing the value again (e.g to qum ...
ts jest moduleNameMapper doesn't work for me
I almost gave up on this but finally fixed it The key below was that moduleDirectories was not requi...
enzyme spy on wrapper.instance() method not called when using shallow()
@samit4me in your examples if you replace wrapper.update() when shallow rendering with wrapper.insta...
ts jest TypeError: Jest: a transform must export something.
pls clear Jest cache and use ts-jest 27.0.0 πŸ› Bug Report After upgrading from jest 23.6.3 to 27.0.1...
vscode jest Test suite failed to run in VSCode 1.22.2
Based on the changes from #324 it looks like you can work around this issue by adding a jest.pathToJ...
enzyme Testing component with async componentDidMount
Problem is that componentDidMount function is called automatically on mount so it is not possible to...
enzyme spy on component method failed
@tpai right because you're using class properties I'm suggesting your component instead be: and then...
enzyme Unable to find node on an unmounted component
I'm running into this same issue with mount. With Enzyme 3.x and React 16 the following code stopped...
enzyme Easier way to access child refs
Generally speaking Once in awhile we'll have a test that renders a component P with child C: To get ...
ts jest ts-jest with cleared cache is reading package.json in node_modules over and over - start takes forever
OH MY GOD! A week of banging my head against the wall just to find this little package.json option d...
enzyme Simulating Click on Child Component not registering
@mrbinky3000 .prop('onClick')() For the life of me I can't figure out how to simulate a click event ...
enzyme Mount find() Does Not Find Rendered Marker
@StefanoSega I had a similar problem I have a component written in pure JS that inserts html inside ...
enzyme Testing if an element is focused
I got it to work in enzyme using jsdom enzyme and mocha. Hi I'm currently trying to test if an eleme...
ts jest Array.flat() is not a function
You should import core-js within setupFiles or setupTestFrameworkScriptFile Exactly what I was looki...
electron react boilerplate Not clear how to include images in my application
@amilajack Apologies This is probably an RTM moment for me with Electron in general ...
enzyme Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
You can try <MemoryRouter> I fixed a similar problem. I'm trying to mount my Application component i...
enzyme How to test component with async componentDidMount
@koba04 then again I don't see how this would work because the only thing your promise.then guarante...
enzyme Issue after upgrading to React 15
@toddw @ljharb solved! Just add the following lines to the externals in webpack configuration: see h...
jest dom Type definitions not properly loaded when importing from jest's setupTests
It would be helpful to see the tsconfig.json file too jest-dom version: 1.10.0 node version: 8.11.3 ...
enzyme Cannot find module 'enzyme/build/ShallowTraversal' from 'shallow.js'
Yeah I got an error when tryng to use jest-serializer-enzyme but if I use enzyme-to-json/serializer ...
ts jest Forced commonjs breaks synthetic default imports
esModuleInterop: true was the key for me Thank you @diegoddox! Issue My React Native code writes imp...
enzyme Enzyme Internal Error: unknown node with tag 0
Fixed for me after update to versions below: Current behavior Gettting an error Enzyme Internal Erro...
enzyme Error: Cannot find module './package' from 'index.js'
If you add json to module file extensions it works. getting this error when trying to import shallow...
enzyme Webpack build issues
My final webpack config to get enzyme running: Related issues: sinonjs/sinon#600 webpack/webpack#304...
enzyme shallow doesn't work properly with redux connect(store)
You can also use dive() Thus _wrapper.dive().find('Footer') related to this issue reduxjs/redux#1534...
vscode jest env: node: No such file or directory
If you have installed node using nvm it won't be in the place this extension expects it to be (/usr/...
vscode jest How to add ENV variables to the extension?
You can set environment variables in jest.config.js ie: I didn't found any direct way to set the env...