[jest-emotion] snapshots reordering css based on test order, causing failures.

Current behavior: Rendering styled components in jest using @testing-library/react and @testing-library/jest-dom is causing some sort of mutation that changes the order css is written in the snapshot. This causes snapshots to fail when a test is skipped, removed, or re-ordered, among other situations.

It took me many hours to track this down in a large project and it makes our tests very unreliable and causes a ton of noise when the code in many of our styled components changes.

To reproduce: I’ve created a reproduction repo here: https://github.com/Jimmydalecleveland/emotion-jest-reordering-bug

The instructions are in the readme. This is not the only way to reproduce this bug, but it’s the most simple and clear that I could come up with. Thank you, in advance, for looking at this and any help you can give.

Here is a quick example screenshot from the repo I linked which shows the css being re-ordered:

Expected behavior: The order of the tests should not mutate other test snapshots. Removing, skipping, or moving a test should not fail other tests snapshots due to css being moved around.

Environment information:

• react version: 16.12.0
• emotion version: 10.0.27
• jest version: 24.9.0 (25’s new diffing tool still has conflicts with jest-emotion)
• jest-emotion version: 10.0.27

[Andarist]

Both tests share the same underlaying cache which is only populated when styles are about to be rendered (so as lazily as we can get). If you have 2 tests - A and B (in that order) and you render both then you end up with A and B styles injected (in that order), if you skip A then you only have B styles injected and this has messed up your snapshots.

[Andarist]

getStylesFromClassNames currently works by iterating through extracted classNames: https://github.com/emotion-js/emotion/blob/fc119766b539f73546dc8e2863cca1439af3cb1c/packages/jest/src/utils.js#L168 and appending matches to the output string, so yes - this currently is prone to style elements being reordered.

A possible solution to this would be to change how this is being iterated in a way that would preserve the order of input classNames. Would you like to take a stab at this?