CSS on snapshots are getting reordered on CI and different machines

Current behavior:

When the tests run locally the snapshots are ok but when it runs on the CI it gets differences on the snapshots. I tried locally in 3 machines, 2 equal laptops (in one of them I run in Windows and Linux) same snapshots and in a different machine, it gave different snapshots like the same behaviour of CI. The problem seems to be very similar to some problems that were already fixed in previous versions https://github.com/emotion-js/emotion/issues/1878 https://github.com/emotion-js/emotion/pull/1880 I am not sure where is the problem or how to debug it.

Here is a couple of examples of the differences in the snapshots: Example 1 Example 2

To reproduce:

I am not sure how to reproduce it on a CodeSandbox because I am using a lot of configuration and the problem is when it runs on the CI and different machines. Some relevant configurations are: (I turned off the source maps and the auto label just to be sure) { presets: [ ['@babel/preset-env', { modules: isTest ? 'commonjs' : false }], [ '@babel/preset-react', { runtime: 'automatic', development: isDev, importSource: '@emotion/react' } ] ], plugins: [ isDev && 'react-hot-loader/babel', [ '@emotion', { sourceMap: false, autoLabel: 'never', labelFormat: '[filename]--[local]' } ], '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator', 'lodash' ].filter(Boolean), env: { test: { plugins: [ [ '@emotion', { sourceMap: false, autoLabel: 'never', labelFormat: '[filename]--[local]' } ] ] } } }

1. Run the tests in different machines

Expected behavior:

The snapshots should be the same in different local machines as also on the CI.

Environment information:

• react version: 17.0.2
• @emotion/react version: 11.6.0
• @emotion/babel-plugin version: 11.3.0
• @emotion/css version: 11.5.0
• @emotion/jest version: 11.6.0
• @emotion/styled version: 11.6.0
• @testing-library/jest-dom version: 4.2.4
• @testing-library/react version: 9.4.0

[Andarist]

Closing as it turned out to be the same problem as described here. Node 10 has been used on CI and its [].sort is somewhat unreliable when it comes to the final order of the sorted elements

[Andarist]

I would patch-package console.logs for all of those calls here: https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/jest/src/create-serializer.js#L199-L209

I would inspect their results, compare between runs and focus on the function that yields different results - then I would patch-package even more console.logs into its implementation. That should help you to trace when the execution starts to diverge.