Chart

Chart has no test helpers yet. Until it does, chartSelectors publishes the selectors for the shapes a chart paints, so a test can reach into the plot without hard-coding class names:

import { chartSelectors } from '@customerio/pluma-components/charts/react';

const chart = screen.getByRole('img', { name: 'Opens by email client' });

expect(chart.querySelectorAll(chartSelectors.bars)).toHaveLength(18);
expect(chart.querySelectorAll(chartSelectors.arcSlices)).toHaveLength(7);

A chart is one role="img" over a plot marked aria-hidden, so there is nothing inside it to query by role. These selectors are the supported way in, and they hold across releases even when the class names behind them change.

Two of them are worth knowing before writing a query by hand:

• A bar is a <path>, not a <rect>, wherever it has rounded corners — which is the default. Only radius: 0 leaves it a <rect>.
• A line is a <path> too, not a <polyline>.

A selector that has stopped matching fails as expected +0 to be 6, which reads like the chart drew nothing — so assert a count you expect to be non-zero early rather than reading it off a later assertion.

The tooltip and the legend sit outside the plot, and their class names come from PlumaChart.classNames in @customerio/pluma-components/css instead:

import { PlumaChart } from '@customerio/pluma-components/css';

const tooltip = document.querySelector(`.${PlumaChart.classNames.chartTooltipSurface}`);