0

I created a column chart in React using Highcharts library, and make a story in Storybook for this widget. In the PR we use Chromatic, so to reduce the noise i did animation:false, and it worked for 2/3 stories. I don't want to use delay in Chromatic because then the PR will take forever. I see that there is an open question about it: How to stop Chromatic diff "noise" with Highcharts

But I see here: https://github.com/gravitee-io/gravitee-ui-components/issues/239 That Chromatic is not good for charts and loaders. Is there an alternative way to test this widget? if not Chromatic, so what can I do?

Thanks in advance.

Baruch Levin
  • 330
  • 3
  • 19

1 Answers1

2

I want to start with the disclaimer that I am the founder of Lost Pixel, which is the competitor tool to Chromatic! We have lots of big clients who are using Lost Pixel for visual regressions testing and they are all having flaky tests in the high-charts due to indeterministic rendering of SVGs, so far we haven't been able to fix it on the side of our product and I doubt it is really possible.

I would strongly advice against testing highcharts as those tests are not providing much value usually, especially being super flaky. If you would like to test some pages that contain the charts you could mask the charts though! not sure if chromatic offers that but Lost Pixel allows you to define on the basis of css selectors which parts of the page should be just masked with plain colour and thus not participate in the visual testing at all!

Hope it helps and if you have any questions - feel free to follow up, would be happy to help you!

Dima Ivashchuk
  • 36
  • 1