Cypress: Snapshots Don't Preserve injected style tags (css-in-js)

Created on 25 Jan 2018 · 9Comments · Source: cypress-io/cypress

Operating System: MacOS 10.12.6
Cypress Version: 1.4.1
Browser Version: Chrome 63

Is this a Feature or Bug? Bug

Current behavior:

My project uses a css-in-js library (in this case cxs) to apply styling. The cxs library appends a style tag to the <head> at runtime and adds style definitions to this injected tag.
When tests run normally, styling appears as expected.
However, when switching between snapshots, injected style tags (css-in-js) is not preserved and styling is broken on the page

Desired behavior:

Styles should be preserved, or the javascript bundle should be reran so that styles can be injected again.

(although the second option sounds less likely to be reliable given the nature of snapshotting).

How to reproduce:

Run Cypress with a project that uses a css-in-js library that appends a style tags in <head> at run time.

Additional Info (images, stack traces, etc)

(pseudo) DOM structure while tests are running (correct behavior):

<iframe id="Your App: 'my app name'">
  ...
  <head>
    ...
    < !-- style tag injected by cxs -->
    <style id="_cxs_"></style>
    ...
  </head>
  ...
</iframe>

(pseudo) DOM structure while navigating between snapshots after tests have finished:

<iframe id="Your App: 'my app name'">
  ...
  <head>
    ...
    <!-- I did notice that there is still a style tag in the head 
    that _could_ be the injected style tag, but its missing
    its style declarations, and no longer has the `_cxs_` id, so this could just be a red herring -->
    <style></style>
    ...
  </head>
  ...
</iframe>

bug

Source

arahansen

👍3

Most helpful comment

I use emotion.js and styling is broken

hehex9 on 9 Apr 2018

👍2

All 9 comments

Great observation, that is a problem. Can you create a tiny example, for example by forking https://github.com/cypress-io/cypress-test-tiny so we are looking at the same common example?

bahmutov on 25 Jan 2018

So I put together a create-react-app that demonstrates the issue here. Setup instructions and explanation of whats happening are in the README. But I'll paste the relevant bits here:

Actual Behavior

The cxs example loses styling when navigating between snapshots.

However, the styled-components styling is retained. So it seems this might be an issue explicitly with how cxs is injecting styles. You can see here that cxs uses styleTag.sheet.insertRule to inject styles, and these styles that get inserted aren't actually viewable in the DOM inspector; it seems they are attached to the element directly.

arahansen on 25 Jan 2018

Thanks for taking time to do this.

bahmutov on 25 Jan 2018

No problem! Let me know what other info I can provide.

arahansen on 26 Jan 2018

However, the styled-components styling is retained.

I use styled-components@^3.2.3 and styling is not retained for me

RomanHotsiy on 19 Mar 2018

I use emotion.js and styling is broken

hehex9 on 9 Apr 2018

👍2

Released in 3.0.2.

brian-mann on 29 Jun 2018

I'm experiencing the same issue with css-in-js lib styletron@5. Cypress version is 3.4.1.

jaxxreal on 3 Oct 2019

This issue will be closed to further comment as the exact issue here was resolved and tested.

@jaxxreal If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.