Closed buugaaga closed 11 months ago
Same issue here
Getting the same issue with jest 29.x.
In our case (although we use it project-wide) the solution was to:
import 'jest-styled-components';
// config/jest/styledComponentsSerializer.js
const serializer = require('jest-styled-components').styleSheetSerializer
module.exports = serializer
3. add the file to `snapshotSerializers` in jest config, next to `enzyme-to-json/serializer`, for example:
```ts
"snapshotSerializers": [
"enzyme-to-json/serializer",
"<rootDir>/config/jest/styledComponentsSerializer",
],
@probablyup we've noticed that snapshotting with styled-components v6 + jest-styled-components is entirely broken, do you have any suggestions? This makes testing styled-components rather tricky
Could be due to something with the new version of stylis
Unsure if it's related, but after trying to upgrade to SC6, both this breaks as well as styles in general (I can't use toHaveStyle
or similar)
Thanks for the callout, I found one bug that I patched and shipped as styled-components@6.0.9
that I believe fixes a number of issues around test environments involving JSDOM.
There is a second issue with v6 where stylis is not rendering a space character where it used to... seeing if I can handle that in the library here so people don't need to adjust their assertions.
@buugaaga it's hard to tell from your bug report but if you're on styled-components v6 I think the 6.0.9 upgrade will fix that bug you're seeing and the jest version might potentially be a red herring
I have tried upgrading Jest from 27 to 28 and it seems that jest-styled-components doesn't do anything after the upgrade.
I have code similar to your examples
But the snapshot still have the dynamic classname from styled-components and doesn't include the actual styles: