Jest-styled-components: Doesn't work with jsdom

[lgraziani2712]

Enzyme uses jsdom environment to be able to mount components. The following error is thrown by this module.

TypeError: Cannot read property 'cssRules' of undefined

Thank you!

[MicheleBertoli]

That's correct @lgraziani2712.
As stated in the README, the testEnvironment should be set to node to make this package work.
You can still use Enzyme's shallow rendering.

[MicheleBertoli]

It would be awesome to have @threepointone's help here :)
It looks like ownerNode is always undefined with jsdom.

[lgraziani2712]

Yep, but since didn't see the issue, I reported it! :)

Sorry for not being able to help :(

[lgraziani2712]

@MicheleBertoli I cannot use shallow rendering. At least without changing my tests.

Something as simple as checking if <Button>Hello!</Button> renders the text it'll fail if <Button /> is a styled.button. With shallow render will happen this:

expect('styled.button').toBe('Hello!');

[threepointone]

ola! I'll have a look at this sometime in the next couple of days.

[MicheleBertoli]

Repro steps:

• clone the repo
• install deps
• set testEnvironment to jsdom
• run tests
• you get TypeError: Cannot read property 'cssRules' of undefined

[zvictor]

it is caused by a quite old bug in jsdom: https://github.com/tmpvar/jsdom/issues/992

[MicheleBertoli]

Applying styled-components/styled-components#707 the tests don't break with jsdom but the styles are empty. Needs more investigation.

[zvictor]

Applying styled-components/styled-components#707 the tests don't break with jsdom but the styles are empty. Needs more investigation.

I ended giving up on styled-components v1 and moved to v2.0.0-16+. The API has totally changed in that version and works better.

[joseaplwork]

I'm using styled-components with v2.0.0-17 and jest-styled-components with v2.0.0
now getting

TypeError: styleSheet.rules is not a function

[MicheleBertoli]

Thanks @joseaplwork, please check #5.

[MicheleBertoli]

Jest 20 ships with a @jest-environment annotation which solves this issue, please see #13.
I'm going to close this for now, and we'll get back to it when Styled Components v2 is stable.

[ghost]

I think I might not understand this. How does it solve the issue? When my test relies on jsdom, @jest-environment won't allow me to run a single test magically in both, node and jsdom.

[joseaplwork]

@MoeSattler @jest-environment is available from Jest 20, please make sure you are using the right version.