Add support for visual diffs in Jest

[joshdover]

We have unit tests in the repository that do visual diffs / image comparisons of canvas elements (example) inside the Karma browser test environment.

It appears that these tests may be able to be run in jsdom/Jest using jsdom's canvas support.

We should explore using Jest here to further simplify our testing suite, increase performance, and reduce our reliance on Karma.

Related #54339

[elasticmachine]

Pinging @elastic/kibana-operations (Team:Operations)

[mshustov]

I know that we have Percy for visual tests in FTR. Would it cover the existing needs?

[joshdover]

Percy may give more useful feedback on tests, but the downside is requiring the FTR to run these simple image comparison tests.

[flash1293]

I tested this and managed to make it work for both tag cloud and vega visualizations - the src/test_utils/public/image_comparator.js has to be rewritten (A thin layer on top of https://github.com/americanexpress/jest-image-snapshot using the canvas package to turn stuff into pixels would probably be appropriate and easy to use).

However after having a deeper look into these tests, I don't think we require this level of testing right now. Tag cloud renders to svg, canvas is only in the loop here to turn the svg into pixels. Vega does render to canvas directly, but it is also able to render to svg instead (setting exposed via spec). So for the current Kibana app use cases we can also work with just validating the rendered svg.

Summary: It works and would be a good addition for some cases, but for our current use cases it's not strictly required. For Kibana App team more of a nice-to-have feature.

[tylersmalley]

Is this still a priority or something teams need?

[flash1293]

Not relevant anymore for VisEditors as actual rendering got moved to elastic-charts which is handling this outside of Kibana

[tylersmalley]

This isn't being requested anymore.