Jest-styled-components: Not working with styled-components v3.0.0

[corygibbons]

Broken as styled-components isn't shipping with /lib anymore (https://github.com/styled-components/styled-components/releases/tag/v3.0.1)

Cannot find module 'styled-components/lib/models/StyleSheet' from 'utils.js

[mxstbr]

Haha yeah we fucked you up bad, I'm sorry @MicheleBertoli! Any ideas how to resolve this?

[orta]

I wonder if StyleSheet can be exposed with the rest of these models from the main lib?

https://github.com/styled-components/styled-components/blob/4240d61abab5bf1618e3cde8d4a6d52b9d245fad/src/index.js#L12-L18

[orta]

Lols, or this: https://github.com/styled-components/styled-components/pull/1438

[MicheleBertoli]

I just want you to stop for a second and think about how awesome you all are.

16:18 - Styled Components v3 is released
16:25 - @mxstbr tweets about it
18:22 - @corygibbons migrates to v3, and finds the issue
18:44 - @fczuardi migrates to v3
19:17 - @philpl merges the Styled Components fix
19:23 - @philpl submits a PR to fix Jest Styled Components

Since this package uses the internals of Styled Components, it's expected to break on new releases. Unfortunately, I didn't have time to experiment with the beta this time.
It'd be nice to agree on a set of dev-APIs to allow this package (and potentially other libraries) to build stuff on top of Styled Components.

Anyway, thank you very much everyone :)

[MicheleBertoli]

yarn add jest-styled-components@next 🚀

[mrsln]

by any chance this also broke testing with jsdom?

[kitten]

@mrsln nope, it shouldn’t have. Feel free to open an issue if you experience new problems with v3 + the jest-sc Beta Version

[austingreendev]

Does anyone else have jest-styled-components@next and [email protected] working with snapshot testing?

Looks like I'm running into the same issue as https://github.com/styled-components/jest-styled-components/issues/118

[doque]

We're using [email protected] successfully with jest-styled-components@next. Also included:

    "jest": "22.1.2",
    "jest-environment-jsdom": "22.1.2",
    "jest-environment-jsdom-global": "1.0.3",
    "jest-styled-components": "4.11.0-1",

[fabio-b]

@austin94 When I run jest with no flags, it runs fine with no errors. The classNames are replaced with values c0.
When I run jest with production flag, it no longer uses the replaced classNames and fails.

Here are the versions I'm using:

"styled-components": "^3.1.6",
"jest": "^22.0.3",
"jest-styled-components": "^4.11.0-1"

Passes: jest --watch
Fails: NODE_ENV=production jest

[kitten]

@fabio-b this is most likely due to speedy mode being switched on in a browser-like environment (jest + jsdom). Since insertRule is not supported in Jason afaik, it fails.

@MicheleBertoli I’m currently refactoring the Stylesheets in styled-components and we might be able to force the server mode (in memory styles) and expose more methods if that helps?

[MicheleBertoli]

Thanks for the ping, @kitten.

Another dirty thing this package is doing, is reading the class names and the component IDs within the generated <style /> tags - it'd be great to get that information from a public API, what do you think?

Also, to solve https://github.com/styled-components/jest-styled-components/issues/98 we'd need to get access to stringifyRules, and that's another good candidate to be exposed.

I hope this makes sense for you.

[fabio-b]

@kitten I'm running this from the terminal, does that matter?

[kitten]

@fabio-b as previously said, this is because Jest is by default in a JSDom environment (totally fine and intended) but NODE_ENV=production in a DOM env causes us to use the speedy APIs, which are unsupported by JSDom. To fix it right now, I'm afraid you'll have to run your tests without: NODE_ENV=production

@MicheleBertoli We can certainly make this easier, but we won't expose stringifyRules or anything similar as it's not an API, not even an internal one. As a utility it shouldn't be a problem to just independently replicate it here.

Would there be any disadvantage of not mounting actual style tags in the JSDom virtual window? We can instead use the server mode in Jest.

[brentmclark]

I can confirm that @kitten's recommendation to run the tests without NODE_ENV=production works!

I updated package.json to use:
"test": "NODE_ENV=development jest --silent",
instead of:
"test": "jest --silent",

and our CI environment is now happy. Thanks a ton for helping troubleshoot all of this, folks!

[MicheleBertoli]

Thank you very much, @kitten.
I don't see any problem in not mounting the styles, as long as there's a way to access class names, hashes and rules.

[MicheleBertoli]

v5 is out - thank you very much, everyone 👏

[dashed]

@MicheleBertoli Unfortunately, v5 works with [email protected], but not [email protected].

For [email protected], I get this output from CRA jest:

 FAIL  src/app/home/components/hero/hero.test.js
  ● Test suite failed to run

    Could neither find styled-components secret internals nor styled-components/lib/models/StyleSheet.js

      at Object.<anonymous> (node_modules/jest-styled-components/src/utils.js:15:11)
      at Object.<anonymous> (node_modules/jest-styled-components/src/toHaveStyleRule.js:1:109)
      at Object.<anonymous> (node_modules/jest-styled-components/src/index.js:1:114)
      at Object.<anonymous> (src/setupTests.js:5:1)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.112s, estimated 2s
Ran all test suites.

✨  Done in 8.74s.

[MicheleBertoli]

Hello @dashed, I'm sorry to hear you are having issues with the package.
However, this repo's tests are green with [email protected], and we now have integration tests in the styled components repo as well.
Would you be able to provide a non-working example?
Thank you very much!

[dashed]

@MicheleBertoli interesting. I'll try and see if I can provide a non-working example in create-react-app.

[dashed]

@MicheleBertoli Figured it out. I had "browser": true by accident in my jest config: https://facebook.github.io/jest/docs/en/configuration.html#browser-boolean

Removing it solved the issue 😄

[moffsugita]

npm install jest-styled-components@next

[dylanpyle]

Experiencing this same issue with [email protected], [email protected] after attempting to upgrade to the styled-components beta. Will update if I find a good isolated test case or solution besides not doing the upgrade at this time.

EDIT: [email protected] fixed it!

[cyrus-za]

Thanks @dylanpyle I ran into same issue with sc@4 and jest-sc@6

I just work up one morning and could no longer build my CRA app, without changing dependencies (or tsconfig etc). react-scripts must've downloaded some newer version of something under the hood that had my tsconfig include my test files in the build process.

beta.1 fixed it for me. The irony is that when I installed jest-sc@next and selected beta.8 it did not fix it, so when I came here and saw your comment I switched to beta.1 and it worked. Very strange! I would not have tried beta.1 after failing so you saved me a ton of time :)