Advanced React | Resilient UI | Building React components with minimal side-effects from side-effects

React component testing is a tale of a split-solving problem. A few splits are manageable and a few will fail. Can these failures limit the damage?

(controllable) split: Generally done via Unit and Integration Tests:

1. Styles, Themes
2. Responsive / Layout
3. Mocking

A friend of mine (Naresh Bhatia) wrote a series on these parts above. Please check this out.

(Unmanaged) split: “Real-world” Issues or End to end Tests:

Issues that won’t manifest in controlled environments, such as API failures, Payload mismatches, Latencies/Timeouts, essentially any issues emanating “outside” of Pure component code — i.e., side-effects from hooks!

Photo by Fabian Kleiser on Unsplash

How do you build components that can withstand ‘real world’ issues?

Core Component w/ Uncontrolled Sub-modules (Side-effects / Events)

Here is the most pessimistic scenario, let’s use this as a reference, but let’s not over-engineer every component with the entire tooling.