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?