New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
jest-styled-components is breaking with new 5.0.0 styled-components #297
Comments
That error you see has been resolved when you update jest-styled-components to 7.0.0 |
However theres a few other errors occurring for me after upgrading, would be nice to see the changelog to 7.0.0 |
I have upgraded to 7.0.0 and are experiencing the exact samt problem. |
|
yup, styled-components 5.0 + jest-styled-components 7.0 + Typescript also not happy:
|
Having the same issues, sadly |
I'm also experiencing issues for tests that used to work on v4.4... related to this issue |
Can confirm latest is broken with styled-components 4.4.1. Does a version rollback fix? edit: can confirm version v6.3.4 works with styled-components 4.4.1 |
@Thomazella yes we dropped support for v4 with the v7 release. The internals changed a lot between v4 and v5 and the library needed incompatible updates. |
Thanks. I tried |
Not working with react-native v0.61.5 and |
@lucianomlima are you using global installation approach? Note the deprecation warning here: https://jestjs.io/docs/en/configuration#setupfilesafterenv-array When importing from a file referenced via |
No, i'm not using global installation and I use |
@mirco312312 Thanks! I got working now! |
thanks @mirco312312 - since it took me more than a few minutes to solve, here was the diff in my replaced: |
@raurir thanks! that solved the |
This is makes reading the diffs of snapshots easier to read if the diff is regarding a changed style in a styled component. Note: a previous version was installed to match our core components package.json. Installing the newest version leads to a problem described here: styled-components/jest-styled-components#297
after two months, the problem is still existing. I have to use styled-components v4.4.1 and jest-styled-components 6.3.3 due to this problem. |
import 'jest-styled-components'; Could neither find styled-components secret internals styled-components - 4.4.1 and jest-styled-components - 7.0.2 Can anyone help me to solve this error |
I can confirm that for me it is working with this config:
...🤔 @PravallikaVinod , try these versions or those combinations mentioned at comments above |
Its happend to me, when i use |
Temporary? workaround for
failing test
workable test
|
I also have this problem as well using react-test-renderer and the latest versions:
I have tried the various suggested solutions above, but nothing have helped so far. Any news on any official solution? |
So I had a look under the hood and I found out why the test were breaking. TL;DR - The solution for nowConfigure your [
'babel-plugin-styled-components',
{ ssr: true }
] The analysisThe culprit is that you are directly reliant on having static class names witch are determined by a filtering on the const staticClassNames = classNames.filter(x => /^(\w+(-|_))?sc-/.test(x)); So the this filter extracts any static class names (hence the name) like: However if you don't use static class names, the whole check fails since the return classNames.some(className =>
staticClassNames.some(staticClassName =>
selectors.includes(
getModifiedClassName(
className,
staticClassName,
options.modifier
).replace(/['"]/g, '"')
)
)
); In my configuration none of my styled-components class names have this prefix, since my [ 'Tab__TabElement-gNeteQ', 'fjgULR', 'Tab', '', 'active' ] and with [ 'Tab__TabElement-sc-16mr2vi-1', 'cQclop', 'Tab', '', 'active' ] I don't think that this direct dependency on the static class names are intentional as that would break the very nature of So... This seems like a bug and the check has to be redone somehow to not be directly reliant on the static class names. If you want I can try and look into doing a fix. Let me know. UpdateEven with [ 'Image__Img-k1inrs-0', 'gNQhls', 'Image', '', 'img' ] |
#302 does not fix the issue. jest-styled-components looks for the presence of "sc-" anywhere in the component id. babel-plugin-styled-components does not guarantee that the component id will contain the "sc-" substring. The issue is that babel-plugin-styled-components only applies the "sc-" prefix if it detects the component ID has an invalid css classname, specifically whether it is prefixed by a digit. Temporarily fixed in my project via patch-package and the following patch for version 1.10.7 which modifies the getComponentId function to ensure it contains "sc-": diff --git a/node_modules/babel-plugin-styled-components/lib/visitors/displayNameAndId.js b/node_modules/babel-plugin-styled-components/lib/visitors/displayNameAndId.js
index b67a1c8..2b41702 100644
--- a/node_modules/babel-plugin-styled-components/lib/visitors/displayNameAndId.js
+++ b/node_modules/babel-plugin-styled-components/lib/visitors/displayNameAndId.js
@@ -127,7 +127,8 @@ var getNextId = function getNextId(state) {
var getComponentId = function getComponentId(state) {
// Prefix the identifier with a character because CSS classes cannot start with a number
- return `${(0, _prefixDigit.default)(getFileHash(state))}-${getNextId(state)}`;
+ var componentId = `${(0, _prefixDigit.default)(getFileHash(state))}-${getNextId(state)}`;
+ return componentId.indexOf('sc-') >= 0 ? componentId : `sc-${componentId}`;
};
var _default = function _default(t) {
|
This does seem to stem from an issue in See babel/babel-preset-env#189 (comment) for a reference of how to split babelrc files into envs. |
I concur with @noahnu that the problem resides in the fact that not all class names are being prefixed by And I also agree that a correction has to be done in But the questions is if it is logical that for |
On that note, is it better to just remove the class name filtering entirely? |
We are having the exact same problem. @noahnu 's fix does not fix the issue for us. We still receive the original error |
well this require also a fix from babel plugin side styled-components/babel-plugin-styled-components#276, you can use https://www.npmjs.com/package/@univision/babel-plugin-styled-components that have that fix |
The fix I was referring to was a fix for the babel plugin. |
Uninstall jest styled components library as it has a bug that breaks the test. See styled-components/jest-styled-components#297 for more info.
for me worked with this versions:
|
I'm not using babel plugin, only jest with ts-jest preset. v4/v6 works. v5/v7 doesn't, I get empty className and no css in snapshot. |
I had this issue with Removing the second import resolved my issue. |
We just udpated to styled-components 5.0.0 and our snapshot tests are breaking:
I can see that you had the pre 5.0.0 your
package.json
.Is this expected?
The text was updated successfully, but these errors were encountered: