-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Task] Fix Chromatic Visual Regression Builds #219
Comments
billhimmelsbach
changed the title
[Task] Fix Chromatic Visual Diff Builds
[Task] Fix Chromatic Visual Regression Builds
Oct 26, 2023
billhimmelsbach
added a commit
that referenced
this issue
Nov 3, 2023
Chromatic's TurboSnap feature has been failing for awhile now, or perhaps never worked correctly? This small PR dug around to figure out why, and it looks like it's a problem with the creation of the `preview-stats.json` file. The passed command line option `--webpack-stats-json` to `build-storybook` in the `package.json` appears to be correct for webpack not vite. This PR uses [Chromatic's recommended plugin](https://www.chromatic.com/docs/turbosnap/#github-pullrequest-triggers:~:text=(for%20experimental%20Vite,)) `vite-plugin-turbosnap` to create the stats file. Take a look at the screenshots and commits for a history of attempted solutions. Resolves issue #219 ## Changes - removes dead code `--webpack-stats-json` from `build-storybook` - add and configure `vite-plugin-turbosnap` ## How to test this PR This PR fixes the turbosnap configuration, but it still needs to run again with these updated deps to do diffs. I'm not sure if this is the only fix required, but it's definitely a start. 1. Does Chromatic no longer error due to a [missing webpack-stats.json file](https://github.com/cfpb/design-system-react/actions/runs/6720471476/job/18264108900#step:5:120)? Should now only be stating that it is [disabled due to deps changes](https://github.com/cfpb/design-system-react/actions/runs/6726430803/job/18282666371#step:5:57). ## Screenshots *Before Fix*: errors in GitHub action due to missing `webpack-stats.json file` <img width="681" alt="Screenshot 2023-11-01 at 6 11 37 PM" src="https://github.com/cfpb/design-system-react/assets/19983248/e4b09cf9-8cd3-44a1-bf33-09713d751134"> *Before Fix*: error in parsing file locally even [when forcing `webpack-stats.json` file](c5f38b3) via `WebpackStats()` in vite. Error persists [after name change](b490e65). Parsing error tracked down to the fact that Chromatic expects a different format for the file than what vite normally produces. <img width="1073" alt="Screenshot 2023-11-01 at 8 12 08 AM" src="https://github.com/cfpb/design-system-react/assets/19983248/b8c35327-757b-466c-b3cd-27b82c572f61"> *After Fix*: Configured the plugin, and TurboSnap is ready to go! <img width="833" alt="Screenshot 2023-11-01 at 6 20 00 PM" src="https://github.com/cfpb/design-system-react/assets/19983248/f83dcaff-3de5-4d5d-b08b-7f3b66abcdc0">
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The text was updated successfully, but these errors were encountered: