Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6581

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

$
0
0

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?


Viewing all articles
Browse latest Browse all 6581

Latest Images

Trending Articles



Latest Images