Unable to test Responsive bar in react testing library

[yogeshhub]

Hi,
I have been using Nivo charts. And it is really awesome with customization.

I am unable to test the Responsive bar component with react testing library. The bar is not rendering in the dom though I couldn't proceed with the test cases.

I double checked the parent height and other data values.

Note: I have tried with the react-test-renderer. but the same result.

These are my configurations,

"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^14.2.1",
"@nivo/bar": "^0.72.0",
"@nivo/core": "^0.72.0",

[yogeshhub]

After debugging the Nivo core library, the responsive wrapper caused the issue by consuming the ResizeObserver browser API. So, we cannot use the ResizeObserver in jest-dom since it is not supported yet.

I have found the workaround for the scenario to mock ResizeObserver and supply the contentRect values from the test.

https://gist.github.com/ErikGMatos/20192d0ee2815a14e8516c16002c6422

[joaopedromatias]

@yogeshhub even mocking the ResizeObserver I'm still not able to render the Line Chart inside of my unit tests.

[plouc]

Yes, while fixed dimensions can be tested, the responsive versions cannot as it's not possible to determine the size of the chart.