americanexpress/jest-image-snapshot

Inconsistent images

andyford opened this issue · 2 comments

andyford commented

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

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 rbardini/storybook-addon-paddings#31 . Disabling the addon (or manually overriding the CSS transition) fixes the issue

So not an issue with jest-image-snapshot 👍

andyford commented

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