Overview

In our CI, we runyarn storybook:build to try and vet some issues where the storybook stories get out of sync with the codebase:

However, it seems like this isn't sufficient - as several errors cropped up in storybook:#443

In v1, we used theChromatic to validate our stories stayed consistent build-over-build - having a tool like that integrated into our CI again would catch these sorts of failures in the future.

Current behavior

We do not have visual snapshot testing of our Storybook

V1 behavior

In V1 we had a free version of Chromatic and used it successfully. However, when the free tier usage runs up, it was holding our CI hostage, so we temporarily suppressed it. We need to get an enterprise plan approval and update our pipeline for it.

Furthermore, we noticed that some components (example a component that purposefully threw an error) would have false positives. They were addressed by suppressing Chromatic like this:

exportconstShowingError=Template.bind({})ShowingError.parameters={// The FallbackDialog is noisy for chromatic, because it renders an actual error// along with the stacktrace - and the stacktrace includes the full URL of// scripts in the stack. This is problematic, because every deployment uses// a different URL, causing the validation to fail.chromatic:{disableSnapshot:true},}

Desired behavior

We have visual snapshot testing of our Storybook

Implementation details

We prefer usingChromatic because it's recommended byStorybook