Jest-styled-components: Snapshots not working with styled-components 3.1.0

[nerfologist]

Hi,
I just wanted to report that the snapshot functionality seems to be lost when using the @next version (at this time, v. 4.11.0-0) of jest-styled-components in combination with the just released version 3.1.0 of styled-components.

The nice .c0 class with the relevant style rules is no longer part of the snapshot and we have the styled-components hashed class names instead.

Here's what happens:

 FAIL  src/components/common/Error.test.js
  ● <Error /> › renders correctly

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot 1.

    - Snapshot
    + Received

    -.c0 {
    -  color: #ec373c;
    -  margin: 0.25em 0;
    -}
    -
     <p
    -  className="c0"
    +  className="sc-bdVaJa jdiwyq"
     />

      at Object.it (src/components/common/Error.test.js:22:55)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

HTH

[mxstbr]

Good catch, this was our bad. Fixed in https://github.com/styled-components/styled-components/pull/1460

[MicheleBertoli]

Thank you very much, @nerfologist @mxstbr.
I upgraded SC to v3.1.3, and pushed a new version under next.
I'll soon clean up the code and publish an official release.

In the meanwhile, do you think it's worth adding a simple jest-styled-components test in the styled-components repo?

[mxstbr]

Yeah I think we should really do that at this point 😅 PRs very welcome!

[FredyC]

Wait, but I've installed 7.0.0-2 and the require for StyleSheet is still there. Even though it's hidden behind a condition, Webpack sees it anyway and cries about it. So it doesn't seem a proper fix was made yet?

https://github.com/styled-components/jest-styled-components/blob/2d22d647ee02aa89190738c3b7aa6b3427b6227f/src/utils.js#L21