americanexpress / jest-image-snapshot

✨ Jest matcher for image comparisons. Most commonly used for visual regression testing.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

omnisip opened this issue · comments

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.

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.

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.

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