Snapshots reverting to hashed classnames

[lapanti]

I added jest-styled-components to some of our repos last week and it worked for a few days as nicely as I had hoped, but for some reason now suddenly I'm getting the hashed classnames again in snapshots instead of the styles (c0, c1 etc.). P.S.

Current package.json

"devDependencies": {
  "jest-styled-components": "^6.3.1",
  "react-scripts": "^1.1.4",
  "react-test-renderer": "^16.4.0"
},
"dependencies": {
  "react": "^16.4.0",
  "react-dom": "^16.4.0",
  "styled-components": "3.4.9"
},
"scripts": {
  "test": "react-scripts test --env=jsdom",
}

An example of the failing tests:

import React from 'react'
import renderer from 'react-test-renderer'
import 'jest-styled-components'

import SectionItem from './SectionItem'

describe('<SectionItem />', () => {
  it('should render correctly', () => {
    const comp = renderer
      .create(
        <SectionItem>
          <h1>Test</h1>
        </SectionItem>
      )
      .toJSON()
    expect(comp).toMatchSnapshot()

    const compBig = renderer
      .create(
        <SectionItem bigItem>
          <h1>Test</h1>
        </SectionItem>
      )
      .toJSON()
    expect(compBig).toMatchSnapshot()
  })
})

where SectionItem is a simple styled component

[Kikketer]

@lapanti I've discovered this is not the jest-styled-components issue but an issue in jest-plugin-styled-components: https://github.com/styled-components/babel-plugin-styled-components/issues. I haven't found if anyone has created a bug there yet, but reverting that plugin to version 1.8.0 has fixed this issue for me.

[lapanti]

Thank you for the idea but we don't use babel-plugin-styled-components (or have a .babelrc for that matter as we are using create-react-app) so installing it didn't help my cause :)

[DevanB]

I found that I didn't need to revert babel-plugin-styled-components to 1.8.0 (from 1.9.2), but rather go back to styled-components 4.1.1 from 4.1.2. That fixed this issue for me.

[MicheleBertoli]

Thank you very much for opening this issue @lapanti, and thanks for your comments @Kikketer @DevanB.

@lapanti, unfortunately, I wasn't able to repro - everything seems to work as expected with CRA. Would you be able to provide a non-working repo/example?