search

Mathspy / gatsby-storybook-jest-starter

A Gatsby starter based on default with added Storybook and Jest configurations
MIT License
46 stars 11 forks source link

Idea: Add Visual Regression Tests #5

Closed Undistraction closed 6 years ago

Undistraction commented 6 years ago

Firstly, thanks for this. Hopefully Gatsby will fully embrace storybook and make the integration significantly easier, but in the mean time this is really helpful.

Thought you might consider adding visual regression testing via: jest-image-snapshot

Mathspy commented 6 years ago

You're very welcome! Glad I could be of help :heart:

So I looked at jest-image-snapshot and thought about it for a while and I think the idea is truly amazing but I don't think it's for everyone What I have in mind is, someone like the teams at Facebook or Google could potentially utilise something like this to ensure their critical pages (like Facebook's login or Google's main page) would never change except under the instructions of the UI/design teams

For normal situations I'd think capturing a normal jest snapshot of the component, especially if the component utilise CSS-in-JS alongside libraries like emotion which will serialize the current component's CSS rules and ensure it also matches the previous styles, would suffice. This is the method I use for mathspy.me

My main fear of pushing something like this as the default is for new users to testing to think this is how testing components should be done for all components or for them to use it as a lazy way out of testing their component's behaviour and structure and relying purely on the visual aspect of this test

That said if you believe my fear is wrongly placed I would love feedback as although I am particularly obsessed with testing I don't think I am truly a testing guru or anything of that sort and probably never will be. Either ways I don't mind helping set this up for a branch of this repo or even giving you the steps of how it could be done. I am pretty familiar with puppeteer which ought to work like a charm with this!

Thank you for your feedback and suggestion! :heart:

Undistraction commented 6 years ago

Yes. I hadn't considered that the styles can also be snapshotted. BTW You might be interested in Chroma which is an integration for Storybook and does a very nice job of building visual regression testing into workflow. I think something like this makes a lot more sense for a team than jest-image-snapshot.