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

Environment

System:

OS: Linux 4.15 Debian GNU/Linux 9 (stretch) 9 (stretch)
CPU: (4) x64 Intel® Xeon® 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.

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 10
Comments: 16

Most upvoted comments

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

andreiciceu on Jul 29, 2022

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.

georgewilde on Dec 8, 2020