TypeError: Cannot read property 'parentElement' of null

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

I’m trying to use the ResponsiveContainer to wrap a component but in tests (Jest), i’m getting the following error:

TypeError: Cannot read property 'parentElement' of null

Here’s a gist with the test and the component:

https://gist.github.com/Carlows/e276e740a2a739d3a73cb1053d386134

The same error happened to me when trying to render the LineChart component in a test.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

Version 0.22.0, I’m not aware of this working or not working in other versions, but I didn’t found anything related to this anywhere.

[hendrikmolder]

The issue comes from the ResponsiveContainer component and is caused by the use of refs. As a workaround you can mock refs in snapshot testing

The following test should work

import React from 'react';
import renderer from 'react-test-renderer';
import { BarChart } from '../';

function createNodeMock() {
  const doc = document.implementation.createHTMLDocument();
  return { parentElement: doc.body };
}

describe('BarChart', () => {
  test('renders properly', () => {
    const data = [
      { name: 'A-1', value: 0 },
      { name: 'A-2', value: 10 },
      { name: 'A-3', value: 80 },
      { name: 'A-4', value: 60 },
      { name: 'A-5', value: 45 },
    ];

    const tree = renderer.create(
      <BarChart data={data} color="#ff6363" />,
      { createNodeMock }
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

[usulpro]

Hey @xile611 this issue is fixed in react-resize-detector (see https://github.com/maslianok/react-resize-detector/pull/40) But this package is still depends on an old version https://github.com/recharts/recharts/blob/13997461cd7f82302704c14a20fb123b2433338c/package.json#L64 Don’t you consider to update the version of this dependency to the latest?