search

enzymejs / enzyme

JavaScript Testing utilities for React
https://enzymejs.github.io/enzyme/
MIT License
19.95k stars 2.01k forks source link

How to test the Chart js components or svgs which need to acquire the context. I'm not seeing anything in documentation. #2532

Open i-m-alok opened 3 years ago

ljharb commented 3 years ago

Please fill out the entire issue template.

I have no idea what "chart js components" or "svgs which need to acquire the context" means.

i-m-alok commented 3 years ago

I mean, can we test Chart js related components using Enzyme?

ljharb commented 3 years ago

Maybe? I still don't know what that is or what one of those components would look like.

i-m-alok commented 3 years ago

Take an example of a normal chart, now I want to test on passing correct data and options, Is it rendering or not? You can have a look on attached code sandbox link https://mge2h.csb.app/

ljharb commented 3 years ago

There is no "normal" react chart.

Looking at your codesandbox, I'd probably test App by asserting that it shallow-renders a GroupBar and a GroupApexBar.

Testing GroupedBar and GroupApexBar, however, aren't particularly easy, because they're wrapping DOM-only non-component charting libraries.

GroupApexBar, at least, is only using useState, so you can shallow-render it and assert it's rendering a ReactApexChart with the expected props.

GroupedBar is harder, because of the useEffect. You could try mount-rendering it, but all you can really do is assert that it renders a canvas. You can't (and shouldn't) be testing what the actual charting library does.

I'd suggest using a charting library that's written natively in React, rather than merely abstracting around a non-React one.