There are different solutions on test UI
Jest unit testing
Jest Snapshots
Integration testing
Image comparison testing
Accessibility reports
Manual testing
When to us what? In my experience a big project will end up using all of them.
Let start with the first
Jest unit testing
Unit testing is a type of software testing that focuses on individual units or components of a software system.
Nice… but let also mention that:
we want to test behavior and not implementation
The goal is I can change 100% the implementation and the test will still pass
How? the style is called “Black box testing” and it focus on behavior not on testing each function input output
Jest Snapshots
As the official docs tell
Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly
The idea is, I take a copy of the rendered component ( only the generated HTML) in a scenario X and I will compare each time I run the test. If it’s different… Well, we know something has changed
… to be continued
