@emotion/jest: Unstable order over different systems (docker vs native)

Current behavior:

The order of interactive styles like :hover, :focus etc. is not stable in some cases. They are “jumping” around the “main class”. If multiple interactive styles exists they also mixing up themselves (e.g in some cases :hover is before :focus and in some it comes after).

The problem seems to occur only on docker vs native execution. As i get the same (stable) order on two different macs, running it on two different docker i also get the same (stable) order, but the order differ from the mac ones.

The screenshot shows the diff between running native (origin) and running on docker (the changes) after:

To reproduce:

1. Create a component like a button and add some styles including :hover, :focus and :disabled to it.
2. Create a jest test for using toMatchSnapshot
3. Run the test native with npm
4. Run the test with docker

Expected behavior:

The order of emotion styles should be the same independently from the environment it running on.

Environment information:

• react version: 16.14.0
• @emotion/jest version: 11.1.0
• @testing-library/react version: 11.2.2

[Andarist]

@thisismana could you create a new issue about this? one thing that I would check on your end is if you are creating a cache per SSR request - if not that is the first thing to be fixed.

[bobaaaaa]

It’s mentioned here: https://emotion.sh/docs/ssr#extractcritical . If you think there is a better place to highlight this - let us know. Unless your problem was not related to extractCritical?

Ah, I see. I guess this is ok. The mix of emotion and nextjs is sometimes hard to find the “best” solution. Even the nextjs-examples look a bit different in our case. But that’s a different story.

Just to confirm, were you able to resolve your problem using an Emotion cache per SSR request?

Yes. Thank you very much for your help. ❤️