search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.19k stars 1.03k forks source link

Unable to test Responsive bar in react testing library #2085

Closed yogeshhub closed 2 years ago

yogeshhub commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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

plouc commented 1 year ago

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