Snapshot test crashes with the `coverage` option (& in CI env)

Current behavior:

After the migration from version 10 to version 11, the snapshot test crashes locally with the coverage (react-scripts test --coverage) option and in the CI (circleci) environment with and without the coverage option.

To reproduce:

Locally Snapshot tests:

1. react-scripts test (OK)
2. react-scripts test --coverage (KO)

Example1:

Example2:

const StyledTable = styled(Table)`
    border: none;
    font-weight: normal;
    .Table__row {
        border: none;
    }
    ...
`;

**Expected behavior:**

Environment information:

• react version: 17.0.2
• @emotion/react version: 11.4.1
• @emotion/styled version: 11.3.0
• @emotion/jest version: 11.3.0
• react-scripts version: 4.0.3

[Andarist]

Hello @Andarist, It is a private project. The problem is, I can’t reproduce on another simple app.

That is only an indication that this might be related to your project and that I can’t help you much since I don’t have access to it.

The question is: In your opinion, what can cause this variation (the order of generated classes and the order of css rules)?

It’s hard to tell without seeing the code and the project as a whole.

The majority of related logic should be in getStyleElements, getClassNamesFromNodes and getPrettyStylesFromClassNames. I recommend you to dive into th debugger and just compare both runs - with the --coverage option and without it. This should answer all the questions.

[Andarist]

Then you should look into why classNames are different here - I really don’t have magic tips here, I would myself just start debugging to get to the bottom of this.