How can i test VictoryChart with React Testing Library - React Native?

74 views Asked by At

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:

Chart Image

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?

0

There are 0 answers