[bug] Inconsistent Storybook Snapshot Tests Between Local Environment and GitHub Actions

[mtroskot]

Describe the bug
When running Storybook Snapshot tests using test-runner on GitHub Actions against non-deployed Storybooks, the snapshots generated are inconsistent compared to local runs. The differences observed in the snapshots seem to be related to the class order and styling, specifically in the Tailwind CSS classes.

To Reproduce
1.Steps to reproduce the behavior:
2.Run the Storybook Snapshot tests locally.
3.Run the Storybook Snapshot tests on GitHub Actions.
4.Compare the generated snapshots for differences.

Expected behavior
The snapshots generated locally and on GitHub Actions should be consistent, with no differences in class order or styling.

Screenshots

System
System:
OS: macOS 13.5.2
CPU: (8) arm64 Apple M1
Binaries:
Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
Browsers:
Chrome: 119.0.6045.159
Safari: 16.6
npmPackages:
@storybook/addon-a11y: ^7.5.1 => 7.5.1
@storybook/addon-essentials: ^7.4.6 => 7.4.6
@storybook/addon-interactions: ^7.4.6 => 7.4.6
@storybook/addon-links: ^7.4.6 => 7.4.6
@storybook/addon-onboarding: ^1.0.8 => 1.0.8
@storybook/addon-styling-webpack: ^0.0.5 => 0.0.5
@storybook/blocks: ^7.4.6 => 7.4.6
@storybook/nextjs: ^7.4.6 => 7.4.6
@storybook/react: ^7.4.6 => 7.4.6
@storybook/test-runner: ^0.15.2 => 0.15.2
@storybook/testing-library: ^0.2.2 => 0.2.2

[yannbf]

Hey there @mtroskot, thanks for opening this issue.
I've never seen this error in particular, but if you create a minimal reproduction that I can take a look at, I'm happy to see what's going on and possibly provide a solution!

[mtroskot]

Hi @yannbf,
I've created a github repo where you can test the behaviour, for me the snapshot is passing locally but in github actions it's failing.

[yannbf]

Thank you so much @mtroskot! I suspected the issue could have been running Storybook in prod mode, so I added this to package.json and ran it locally but the issue didn't happen:

    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"npx wait-on tcp:6006 && yarn test-storybook\""

Unfortunately (or fortunately) I am going on vacation so I can't spend more time in this right now. I pushed the script change to your repo and the snapshot diff was actually bigger, even though my change was essentially a refactor of the GH action script. I am suspecting the issue could be related to the swiper element you are using. I assume if you were to try to reproduce this issue in a basic element, without 3rd party components, that wouldn't happen. Could be related to internal logic of handling classnames from that SwiperSlide component.

Sorry I couldn't be more useful for now!

[mtroskot]

Thanks @yannbf for taking a look, should we close this issue or leave it as is ?