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