-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Open
Labels
@lukecoursey
Description
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