ResponsiveContainer warning broken in test environment

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

Bug report

What is the current behavior?

Even if a proper size is defined in the ResponsiveContainer, the ResponsiveContainer component will log a warning in tests thinking the calculated size is 0 while displaying the right values: Example for minWidth(200) & minHeight(100):

WARN: 'The width(0) and height(0) of chart should be greater than 0,
       please check the style of container, or the props width(100%) and height(100%),
       or add a minWidth(200) or minHeight(100) or use aspect(undefined) to control the
       height and width.'

The calculatedWidth / calculatedHeight in ResponsiveContainer don’t take the minWidth & minHeight into account.

steps to reproduce:

clone recharts repo
run npm run test
test is passing but still displaying the warning

What is the expected behavior?

No warning when the right value is passed. Even when a minWidth / minHeight / aspect is passed, the calculated width or height is still 0. It renders properly in the browser, this only happens in tests.

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

Tested on 1.0.0-alpha.0, on macOS 10.12.4 running tests with Mocha & Enzyme. Same thing with version 0.22.1.

Issue Analytics

State:
Created 6 years ago
Reactions:27
Comments:16

Top GitHub Comments

21reactions

gilamrancommented, Jan 12, 2021

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);
});

13reactions

anujparikhcommented, Mar 1, 2019

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

Top Results From Across the Web

Recharts Responsive Container does not resize correctly in ...

It seems rather hacky but a viable fix is to set width to 99% with a height or aspect ratio. <ResponsiveContainer width="99%" aspect={3}>....

TIBCO WebFOCUS® User's Guide Release 9.0.0

you can stress-test your environment and run diagnostic procedures. ... When dropping an item, a Warning message displays, as shown in the following...

Introducing Db2 Web Query - IBM

When dropping an item, a Warning message displays, as shown in the ... Learn how to access all your data from a single...

Getting Started 1 - Temenos Basecamp

You can use it to publish the linked Micro Apps to a run-time environment. ... The following new features have been added in...

Mobile Controls - Software AG Documentation

The type defines the style in which the alert box is rendered. ... that can be later on used within your test tool...