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

yarn add jest-styled-components@next 🚀

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 😃

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

Experiencing this same issue with jest-styled-components@6.3.3, styled-components@5.0.0-beta.8 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: jest-styled-components@7.0.0-beta.1 fixed it!

v5 is out - thank you very much, everyone 👏

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

@MicheleBertoli Unfortunately, v5 works with styled-components@3.0, but not styled-components@3.1.

For styled-components@3.1, 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.

We’re using styled-components@3.1.6 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",

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