Testing React components, both smart and dumb, using Jest and Enzyme

Justus Romijn
Jun 12 · 3 min read
Command Line Interface output of (snapshot) unit tests with Jest of React components. Viewed with VS Code.
  • Container Components: Also known as “smart” components. They contain business logic, might maintain state of their own, and orchestrate presentation components.
Example of a presentational / dumb component. It has no internal state, and mainly creates markup based on the properties.
Testing of presentational component using snapshots. Behaviour and use of properties are tested with regular assertions and spies (if passed callbacks are fired appropriately).

Example of a smart component, e.g. with own state. It uses the setState hook to keep count of the amount of bashes.
Example of testing smart component using shallow rendering. By calling the onClick property of the Button component we can test our component logic without knowing how the Button actually works underneath.

Frontmen

Frontmen, frontend experts

64

64 claps
Justus Romijn

Written by

I’m a frontend developer at Frontmen, a company that focuses on frontend only. Beside my work I also enjoy tennis & table tennis, music, movies and games!

Frontmen

Frontmen

Frontmen, frontend experts