testing-data-visualizations

Test React chart components at the public contract level: visible labels, legends, empty and error states, interaction callbacks, and accessible names. Keep transform logic in pure unit tests and reserve screenshots for layout-sensitive states rather than asserting library-generated DOM.

Unit tests cover pure logic like scales, binning, sorting, and formatting. E2E tests cover workflows spanning routing and async data, such as cross-chart filtering, URL state, drill-down, live refresh, and export or download flows.

Freeze viewport size, fonts, theme, locale, timezone, and animation before capturing, and use seeded fixture data. Capture the smallest useful region, mask volatile elements like timestamps, and keep only a few intentional baselines instead of full-page snapshots.

Mock at the network, loader, or repository boundary so transform and rendering logic stays real. Maintain canonical, edge-case, and stress fixtures covering nulls, zeros, outliers, empty series, and long labels, using seeded synthetic data when shape matters more than meaning.

Rely on data-contract tests, interaction event tests, render-ready signals, canvas-pixel sanity checks, and context-loss coverage rather than DOM snapshots. Add targeted visual baselines and a no-WebGL fallback screenshot for advanced scenes.

Flakiness usually comes from unsettled fonts or animations, live data, and over-broad baselines. Add determinism through fixed fixtures and disabled motion, delete duplicated assertions across layers, and stop testing third-party library internals.