reactchartjs / react-chartjs-2

React components for Chart.js, the most popular charting library
https://react-chartjs-2.js.org
MIT License
6.64k stars 2.37k forks source link

[Bug]: "Element type is invalid" when testing Line chart with react testing library #1218

Open lukecoursey opened 4 months ago

lukecoursey commented 4 months ago

Current and expected behavior

Calling render() with a component that uses a Line chart fails with the message:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TestChart`.

The exact same test using a Bar chart instead of a Line chart passes with no errors. The charts render fine, the error only appears during unit testing.

Example component:

import { Line } from 'react-chartjs-2';

const TestChart = () => {
    const chartData = {
        labels: [2010, 2011, 2012, 2013],
        datasets: [
            {
                label: 'All Species',
                data: [1, 5, 10, 20],
                borderColor: '#009344',
                backgroundColor: '#009344'
            }
        ]
    };

    return <Line data={chartData} />;
};

export default TestChart;

And example test:

import { render } from '@testing-library/react';
import TestChart from '../components/TestChart';

describe('TestChart.tsx', () => {
    it('should render', () => {
        const component = render(<TestChart />);
        expect(component).toBeTruthy();
    });
});

Reproduction

Repro examples provided above

chart.js version

v4.4.0

react-chartjs-2 version

v5.2.0

Possible solution

No response