ResponsiveContainer cannot be rendered and hence cannot be tested using react testing library

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

1. Use ResponsiveContainer to render a chart
2. Render the chart component with react testing library

What is expected?

The chart should get rendered

What is actually happening?

<div class="recharts-responsive-container makeStyles-chart-21" style="width: 100%; height: 300px;">
    <div style="position: absolute; width: 0px; height: 0px; visibility: hidden; display: none;"/>
</div>

The chart is hidden with 0 height and width. No dom nodes are created for the chart.

Environment	Info
Recharts	v1.8.5
React	16.13.0
System	macOS Mojave 10.14.6
Browser	React testing library

---

The chart is rendered while testing if ResponsiveContainer is replaced with a div.

[joshua-phillips]

You’re a life-saver, @krzysu! This was making me crazy. The only thing I’ll add is that I had to return all the other recharts components as-is with spread syntax on the original module.

jest.mock('recharts', () => {
    const OriginalModule = jest.requireActual('recharts');

    return {
        ...OriginalModule,
        ResponsiveContainer: ({ height, children }) => (
            <OriginalModule.ResponsiveContainer width={800} height={height}>
                {children}
            </OriginalModule.ResponsiveContainer>
        ),
    };
});

Thanks again!

[krzysu]

you mock ResponsiveContainer in your test, something like below:

jest.mock('recharts', () => {
  const OriginalResponsiveContainerModule = jest.requireActual('recharts');

  return {
    ResponsiveContainer: ({ height, children }) => (
      <OriginalResponsiveContainerModule.ResponsiveContainer
        width={800}
        height={height}
      >
        {children}
      </OriginalResponsiveContainerModule.ResponsiveContainer>
    ),
  };
});