search

americanexpress / jest-image-snapshot

✨ Jest matcher for image comparisons. Most commonly used for visual regression testing.
Apache License 2.0
3.84k stars 200 forks source link

Update README to show the many ways jest-image-snapshot can be used #229

Open omnisip opened 4 years ago

omnisip commented 4 years ago

Inspired by @lukasopperman 's PR (#227), I think it would be a really good idea to show people we can do this.

While I don't know if live website testing was the original use case for the library, it could be really useful for anyone who wants to implement external regression testing for different device types and resolutions. If we can add samples and/or possibly an archetype for a project to do external regression testing, it could be really cool.

Note: there are some interesting peculiarities about live testing. For instance, any site that has a date or a time listed on it can fail a snapshot. Similarly, if there's a carousel or other moving javascript, there's no guarantee that it won't be moving at the time the snapshot is taken. However, this leaves open a lot of interesting ideas about how to incorporate regression testing after the fact and perhaps to generate tests with automation.

omnisip commented 4 years ago

When I first wrote this, I totally glazed over the fact that the first sample was using a browser -- however -- I'm still interested in hearing feedback on how people are using this. There are so many fun use cases, why not advertise them?

I'm changing the title of this topic to let people chime in with how they're using jest-image-snapshot.

omnisip commented 4 years ago

How I use it:

jest-image-snapshot + jest-puppeteer-react + storybook (@storybook/react + @storybook/addon-storyshots-puppeteer).

We use a component driven development lifecycle that allows us to automatically test and screenshot every component at 5 or 6 different resolutions. This makes it possible to snapshot the smallest elements and test as they build up to the entire page, while verifying they work on mobile and desktop devices effectively.

github-actions[bot] commented 4 years ago

This issue is stale because it has been open 30 days with no activity.