Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 this issue Jul 29, 2021 · 5 comments

Comments

@i-m-alok
Copy link

No description provided.

@ljharb
Copy link
Member

ljharb commented Jul 29, 2021

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
Copy link
Author

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

@ljharb
Copy link
Member

ljharb commented Jul 29, 2021

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

@i-m-alok
Copy link
Author

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
Copy link
Member

ljharb commented Jul 30, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants