Im trying write tests to this component:
import React, { useMemo } from 'react';import { useTheme } from 'styled-components/native';import { VictoryAxis, VictoryBar, VictoryChart, VictoryTooltip, VictoryVoronoiContainer,} from 'victory-native';import { pixelToDP } from '../../../../utils';import { ChartTooltip } from './ChartTooltip';import type { HeartRateByRange, ChartData } from '../types';interface OwnProps { loading: boolean; currentDay: HeartRateByRange | null;}export const TechnosDailyHeartRateChart = ({ loading, currentDay,}: OwnProps) => { const theme = useTheme(); const domainY = useMemo((): [number, number] => { const minHeartRate = currentDay?.min ?? 0; const maxHeartRate = currentDay?.max ?? 0; if (minHeartRate === maxHeartRate) return [80, 100]; return [minHeartRate - 10, maxHeartRate + 10]; }, [currentDay?.min, currentDay?.max]); const chartData = useMemo(() => { if (!currentDay) return null; return currentDay.chartData .map((item, index) => ({ item, hour: index })) .filter(({ item }) => item.max !== item.min) .map( ({ item, hour }): ChartData => ({ x: hour + 1, y: item.max, y0: item.min, data: item, label: '', }) ); }, [currentDay]); const tickValuesY = useMemo(() => { const [start, end] = domainY; const sectionSize = (end - start) / 3; return [ start, Math.round(start + sectionSize), Math.round(start + 2 * sectionSize), end, ]; }, [domainY]); return (<VictoryChart containerComponent={<VictoryVoronoiContainer voronoiDimension="x" />} domain={{ x: [0, 25], y: domainY }} theme={{ axis: { style: { axis: { stroke: theme.palette.surface3, strokeWidth: 1, }, grid: { fill: 'none', stroke: 'none', }, tickLabels: { fill: theme.palette.greyTextLabel, fontSize: pixelToDP(14), padding: pixelToDP(8), }, }, }, }} style={{ parent: { margin: 0, padding: 0, }, }} width={pixelToDP(340)} height={pixelToDP(324)} padding={{ top: pixelToDP(104), bottom: pixelToDP(24), left: pixelToDP(0), right: pixelToDP(32), }}><VictoryAxis tickValues={[1, 7, 13, 19]} tickFormat={['0h', '6h', '12h', '18h']} style={{ grid: { stroke: theme.palette.surface3, strokeWidth: 1, strokeDasharray: '5, 5', strokeLinecap: 'round', strokeLinejoin: 'round', pointerEvents: 'painted', }, tickLabels: { textAnchor: 'start' }, }} /><VictoryAxis dependentAxis orientation="right" tickValues={tickValuesY} style={{ axis: { strokeWidth: 0 }, grid: { stroke: theme.palette.surface3, strokeWidth: 1 }, }} /><VictoryBar style={{ data: { fill: theme.palette.heartRate, width: pixelToDP(8), }, }} cornerRadius={{ top: pixelToDP(4), bottom: pixelToDP(4) }} data={loading || !chartData ? [] : chartData} labelComponent={<VictoryTooltip renderInPortal={false} flyoutComponent={<ChartTooltip chartData={chartData} />} /> } /></VictoryChart> );};This is the result of component render with a mocked data:
I am new with react testing library and i didn't find a way to get VictoryBar reference in my tests. The test cases that i need check are mainly:
1 - When press bar, the tooltip is render;
2 - When press specific bar, the tooltip is render with the correct values.
I can check the tooltip render by text, but how can i get and press the red victory bar?
Is it possible to set a test id? If yes, how can i do this?





