1

Testing react-apexcharts apexcharts with Jest and React Testing Library. snapshot fails

Hi, I'm trying to test my chart component, that i created using apexchart with the react integration. But I can't even create a snapshot that seems related to the library?

TypeError: Cannot read properties of undefined (reading 'node') at t.value

I saw that react-apexchart hasn't been updated in 1 year. Should I just use a different library?

My Component (a basic bar graph example from https://apexcharts.com/docs/react-charts/

function MyGraph() {
  const state = {
    options: {
      chart: {
        id: 'basic-bar'
      },
      xaxis: {
        categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
      }
    },
    series: [
      {
        name: 'series-1',
        data: [30, 40, 45, 50, 49, 60, 70, 91]
      }
    ]
  };

  return (
    <Grid
      sx={{
        height: 500
      }}
    >
      <Chart options={state.options} series={state.series} type="bar" width="500" />
    </Grid>
  );
}

My test (Jest + testing-library/react)

const Component = ({ status = mockData.status, resData = mockData.resData }) => {
  return <HistoricalDataGraph status={status} resData={resData} dataKey={mockData.dataKey} />;
};
  
it('should render correctly', () => {
    const { container } = render(<Component />);
    expect(container).toMatchSnapshot();
  });

The error

Cannot read properties of undefined (reading 'node')
TypeError: Cannot read properties of undefined (reading 'node')
    at t.value //etc. etc.
Fran
  • 11
  • 1

0 Answers0