babel-plugin-styled-components
babel-plugin-styled-components copied to clipboard
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(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.
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
Created PR #269 for a solution that makes all componentIds prefixed with sc-
Hello,
Thanks @robilars-amazon for the PR.
Any estimate on when this can be reviewed and merged ?
Seconded, kinda driving me crazy over here, none of the fixes or hacks seem to work for me. Can try to help if needed.
Looks like https://github.com/styled-components/babel-plugin-styled-components/pull/269 was not building in CI. Created a new PR: https://github.com/styled-components/babel-plugin-styled-components/pull/276
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
It was fixed on the jest-styled-components side: https://github.com/styled-components/jest-styled-components/compare/v7.0.1...v7.0.2
It was fixed on the jest-styled-components side: styled-components/[email protected]
Beauty! Thanks for the heads up on that :)
Unfortunately, just tested in a branch of an active project. Still issues with the latest versions.
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.
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
for me the current workaround is to set SSR: true, noticied my components are correctly prefixed with sc and my tests work!
