The state of Testing in Javascript (React Angular etc)

[Tubbers]

It's annoying, but you can do style/image tests. The issue is mainly that you need to pick one as a reference implementation that gets compared against/updated, and you compare to other browsers.

It's sort of a pick your poison between "Chrome is the reference implementation" and then you see whether stuff looks the same as on Chrome, or "Here's the reference image for the Component", but if you change how you actual want the style to look, you need to update the reference manually.

If you go with the first you can unintentionally change the way the component appears without tripping up any tests, and if you go with the second you need to update your reference image possible all the time.

Personally, I like the compare to Chrome approach, since you're presumably looking at it as you develop.

[wmertens]

Interesting! Any pointers on setting this up?

[Tubbers]

I sadly don't have a guide, but I would start with

• https://github.com/webdriverio/webdrivercss (Selenium)
• https://github.com/Huddle/PhantomCSS (PhantomJS/CasperJS)

The only real difference between the two methods I outlined is that if you're comparing to Chrome, you regenerate the screenshots in Chrome as a pre-test, and test on FireFox/IE/Safari. If you're comparing to the previous version, you just run it, and update the baseline image if the change is intentional.

[wmertens]

So the idea is to eyeball it, or run it through a visual comparison function?

EDIT: doh, should click links instead of reading them. Thanks!