Testing difficult React components with data snapshots

Some of our React components were difficult to test directly. I started by capturing the state and reference values they held after rendering. These data snapshots gave us a baseline to compare in GitHub CI before attempting small refactors.

Starting from the existing testing setup

When I joined, testing work on the design system was already underway. A dedicated test team handled most testing, while the frontend team did not yet have an established set of testing tools.

I configured Chromatic for visual regression testing of the design system and set up Jest and Playwright environments for the frontend team.

Capturing data snapshots for CI review

After a component finished rendering, I saved its state and reference values as snapshot data. GitHub CI checked whether those values changed, and we reviewed differences to decide whether they were intended. This made it easier to add tests before redesigning the components.

Checking polygon visualization and data updates

The map testing work covered polygon interactions and visualization behavior.

One map scenario checked that supplying 100 polygons resulted in 100 rendered polygons. Other checks covered whether text labels appeared in their defined areas.

Unit tests checked whether inputs produced the expected data-model updates and whether the data flow maintained the intended state.

Giving teammates a starting point for writing tests

I wrote guides and adapted standard test templates so teammates had examples to start from. They went on to write and use tests with this setup.

I saw more side effects being caught during PR review and more test code being written. I do not have figures to quantify either change.

As snapshots accumulated, we could use them to check small refactors that were meant to leave the recorded data unchanged. A difference still needed review: the snapshots covered only the data we had captured.