search

americanexpress / jest-image-snapshot

✨ Jest matcher for image comparisons. Most commonly used for visual regression testing.
Apache License 2.0
3.81k stars 197 forks source link

Inconsistent images #292

Closed andyford closed 2 years ago

andyford commented 2 years ago

Hello,

I'm using jest-image-snapshot inderectly via Storybook using the setup described here https://storybook.js.org/blog/interaction-testing-with-storybook/#:~:text=Extend%20and%20customize%20using%20the%20test%20hook%20API

I'm seeing slight inconsistencies with text rendering and sometimes with element positioning when generating the same un-modified component screenshots on the same machine/environment

Only text differences components-alert-test-only--default-diff

Text and component positioning differences components-alert-test-only--default-diff

(I've also seen subsequent test runs pass indicating no difference in the screenshots)

I'd really like to avoid setting a difference threshold > 0

Any advice?

andyford commented 2 years ago

It turns out that the Storybook Padddings addon was causing this issue. The padding is animated (via a CSS transition) and the animation is not finished before the screenshot is taken causing the discrepancies https://github.com/rbardini/storybook-addon-paddings/issues/31 . Disabling the addon (or manually overriding the CSS transition) fixes the issue

So not an issue with jest-image-snapshot 👍

andyford commented 2 years ago

issue caused by an external factor. Not by jest-image-snapshot