All CSS loads into head of first spec with mounted component

[daedalius]

Hi Gleb!
While running all specs I've noticed that the first spec with mounted component get all (and duplicated) CSS styles.
You can see that in your "calculator" example. Lets say it's unable to see orange button when you run tests in the row. To reproduce this clearly you can just rename button.spec.js to _button.spec.js so it will run first. As a result calculator.spec.js will lose all CSS and button really will be orange.

I've faced this issue at my work. Any advice?

[daedalius]

Through some debugging I figured out that calling "appendChild" removes style from "all iframe". I've added "cloneNode" so all specs receives all styles. But they are still duplicated.
Now need to figure out what stylesheets are needed for a spec to clone them particulary.
There should be mark with a spec name (or smth. else) while webpack bundling... What do you think?

[bahmutov]

No clear way to resolve this just yet :(

…

Sent from my iPhone

On Dec 7, 2018, at 08:02, daedalius ***@***.***> wrote: Through some debugging I figured out that calling "appendChild" removes style from "all iframe". I've added "cloneNode" so all specs receives all styles. But they are still duplicated. Now need to figure out what stylesheets are needed for a spec to clone them particulary. There should be mark with a spec name (or smth. else) while webpack bundling... What do you think? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[kevinwhoffman]

I ran into this issue today while trying to import CSS in cypress/support/index.js so that the CSS would be available to all specs. When I run all specs, the CSS is only available to the first spec that mounts a component according to alphabetical order.

If I remove the CSS import from cypress/support/index.js and add it to each individual spec, then I still see the same behavior where the CSS is available to the first mounted component but none after that.

[bahmutov]

Could you try Cypress v4.5.0 and cypress-react-unit-test@4?

[daedalius]

@bahmutov thanks!
It works perfectly now. I've already tried it here