Doesn't seem to support Jest 28 and newest

[buugaaga]

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

import React from 'react';
import { render } from '@testing-library/react';
import 'jest-styled-components';
import styled from 'styled-components';

const Button = styled.button`
  color: yellow;
`;

describe('Test', () => {
  it('works', () => {
    const { container } = render(<Button />);
    expect(container.firstChild).toMatchSnapshot();
  });
});

But the snapshot still have the dynamic classname from styled-components and doesn't include the actual styles:

exports[`Test works 1`] = `
<button
  class="sc-bczRLJ bqIyce"
/>

[mmakarin]

Same issue here

[Ankit-Garg21]

Getting the same issue with jest 29.x.

[mariczne]

In our case (although we use it project-wide) the solution was to:

1. remove import 'jest-styled-components';
2. create a file that would re-export styleSheetSerializer as default, which is necessary for it to be used in the next step:

// 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:

    "snapshotSerializers": [
        "enzyme-to-json/serializer",
        "<rootDir>/config/jest/styledComponentsSerializer",
    ],

[tim-soft]

@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

[quantizor]

Could be due to something with the new version of stylis

[coravacav]

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)

[quantizor]

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.

[quantizor]

@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