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.