Skip to content

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

Open
@lukecoursey

Description

@lukecoursey

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions