jest-styled-components toHaveStyleRule() does not detect styles when using babel-plugin-styled-components

[robilars-amazon]

Environment

System:

• OS: Linux 4.15 Debian GNU/Linux 9 (stretch) 9 (stretch)
• CPU: (4) x64 Intel(R) Xeon(R) CPU @ 2.30GHz
• Memory: 4.06 GB / 25.51 GB
• Container: Yes
• Shell: 4.4.12 - /bin/bash

Binaries:

• Node: 10.17.0 - /usr/local/bin/node
• Yarn: 1.19.1 - /usr/local/bin/yarn
• npm: 6.11.3 - /usr/local/bin/npm

npmPackages:

• babel-plugin-styled-components: ^1.10.7 => 1.10.7
• jest-styled-components: ^7.0.0 => 7.0.0
• styled-components: ^5.0.0 => 5.0.0

Reproduction

https://repl.it/@robilarsamazon/jest-styled-components-5-and-babel-plugin-styled-components

Steps to reproduce

Click "Run" to run execute unit test

Expected Behavior

Test passes

Actual Behavior

Test fails

Notes

jest-styled-components toHaveStyleRule() depends on componentIds that start with sc-. When babel-plugin-styled-components is enabled, componentIds are not prefixed.

[robilars-amazon]

The correct behavior can be seen by removing "babel-plugin-styled-components" from babel.config.js and re-running the test in https://repl.it/@robilarsamazon/jest-styled-components-5-and-babel-plugin-styled-components

[robilars-amazon]

Created PR #269 for a solution that makes all componentIds prefixed with sc-

[vvanmol]

Hello,

Thanks @robilars-amazon for the PR.

Any estimate on when this can be reviewed and merged ?

[samplefrequency]

Love to see this get merged soon.

[PatrickMcLennan]

Seconded, kinda driving me crazy over here, none of the fixes or hacks seem to work for me. Can try to help if needed.

[robilars-amazon]

Looks like #269 was not building in CI. Created a new PR: #276

[robilars-amazon]

I published out a fork of the package with the PR applied. Feel free to use this till a fix is added to master
https://www.npmjs.com/package/@robilars/babel-plugin-styled-components

[PatrickMcLennan]

@robilars-amazon much appreciated, thank you!

[samplefrequency]

This is still not addressed? :(

[robilars-amazon]

It was fixed on the jest-styled-components side:
styled-components/jest-styled-components@v7.0.1...v7.0.2

[samplefrequency]

It was fixed on the jest-styled-components side:
styled-components/jest-styled-components@v7.0.1...v7.0.2

Beauty! Thanks for the heads up on that :)

[samplefrequency]

Unfortunately, just tested in a branch of an active project. Still issues with the latest versions.

[robilars-amazon]

I also tested it. Yep you are right.

[georgewilde]

I have tested and found this is still an issue today with the following package versions:

"babel-plugin-styled-components": "1.12.0",
"@babel/core": "7.12.9",
"jest-styled-components": "7.0.3",
"jest": "26.6.3",

As I understand it from looking over the code, jest-styled-components expects that each styled component class starts with "sc-", however, babel-plugin-styled-components seems to only prefix classes with "sc-" where the hash for that class starts with a number. This is because class names can't start with a number.

I am using react-testing-library with Jest and when I use the debug() feature to view the component under test I can see that around 80% of my styled component class names start with a number, these are all correctly prefixed with "sc-", those that start with a letter appear to all omit the prefix.

It sounds like the addition of the namespace option should have fixed this but I have tried setting the "namespace" to "sc-" as suggested in this issue jest-styled-components issue and while it is applied to some classes it isn't applied to all and so has fixed this in every instance.

I believe that PR #276 correctly fixed this issue as it results in all styled component classes receiving the prefix. However, that PR was created some time ago and so is now out of date.

[andreiciceu]

This is still an issue on:

"jest-styled-components": "7.0.8",
"styled-components": "5.3.1",
"babel-plugin-styled-components": "2.0.7",
"@babel/core": "7.17.9"

And I cannot disable displayName for the babel plugin as we use it in testing

[matheuskroska]

for me the current workaround is to set SSR: true, noticied my components are correctly prefixed with sc and my tests work!