recharts: ResponsiveContainer warning broken in test environment

A fast solution would be to define some mock value for the clientWidth and clientHeight on the beforeAll

beforeAll(() => {
  jest.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(100);
  jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(100);
});

This is what I did in jest.setup.js to mitigate the issue for now:

const MockResponsiveContainer = props => <div {...props} />

jest.mock('recharts', () => ({
  ...jest.requireActual('recharts'),
  ResponsiveContainer: MockResponsiveContainer,
}))

same with me, whenever I am using Responsive Container. I am getting same error while unit testing the code

This didn’t do the work for me since both containerWidth & Height remained 0. I used the following mitigation to solve this issue while testing with enzyme:

    let containerProps = {};
    if ('a case where I know this will happen') {
      containerProps['width'] = 100; // some default values
      containerProps['aspect'] = 1;
    }

    return (
      <ResponsiveContainer {...containerProps}>
        {children}
      </ResponsiveContainer>
    );
  }

This if not optimal, but it’s a quick mitigation.

Yep, I am also still encountering this warning on 1.6.2.

This is what I did in jest.setup.js to mitigate the issue for now:

const MockResponsiveContainer = props => <div {...props} />

jest.mock('recharts', () => ({
  ...jest.requireActual('recharts'),
  ResponsiveContainer: MockResponsiveContainer,
}))

it worked like this for me in React 18 and Testing-library/react 13

jest.mock('recharts', () => ({
  ...jest.requireActual('recharts'),
  ResponsiveContainer: props => <div {...props} />,
}))

also receiving this warning with 2.0.0-beta.1

still receiving it as well…

How to get rid of the warning?

I had some trouble with the solutions above. I managed to make it work with the following mock:

// /__mocks__/recharts.js

import { Children, cloneElement } from "react";

export function ResponsiveContainer(props) {
  return (
    <div>
      {Children.map(props.children, (child) =>
        cloneElement(child, { width: 100, height: 100 })
      )}
    </div>
  );
}

export * from "recharts";

If anyone is interested in a Vitest solution

  vi.mock('recharts', async (importOriginal) => {
    const originalModule = (await importOriginal()) as Record<string, unknown>
    return {
      ...originalModule,
      ResponsiveContainer: () => createElement('div'),
    }
  })

A fast solution would be to define some mock value for the clientWidth and clientHeight on the beforeAll

beforeAll(() => {
  jest.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(100);
  jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(100);
});

This is not working for me