Jest-styled-components: Does not work with enzyme

[BenLorantfy]

The following code produces a weird snapshot value.

Code:

import React from 'react';
import styled from 'styled-components';
import { shallow } from "enzyme";
import toJson from 'enzyme-to-json'

it('renders without crashing', () => {
  const Button = styled.div`
    color: red;
  `;

  const wrapper = shallow(<Button />);
  expect(toJson(wrapper)).toMatchSnapshot();
});

Snapshot:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders without crashing 1`] = `
<StyledComponent
  forwardedComponent={
    Object {
      "$$typeof": Symbol(react.forward_ref),
      "attrs": Array [],
      "componentStyle": ComponentStyle {
        "componentId": "sc-bdVaJa",
        "isStatic": false,
        "rules": Array [
          "
    color: red;
  ",
        ],
      },
      "displayName": "styled.div",
      "foldedComponentIds": Array [],
      "render": [Function],
      "styledComponentId": "sc-bdVaJa",
      "target": "div",
      "toString": [Function],
      "usesTheme": false,
      "warnTooManyClasses": [Function],
      "withComponent": [Function],
    }
  }
  forwardedRef={null}
/>
`;

Expected: (I get this if I try react-test-renderer directly instead of enzyme)

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders without crashing 1`] = `
.c0 {
  color: red;
}

<div
  className="c0"
/>
`;

Versions:

    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "enzyme-to-json": "^3.4.0",
    "jest-styled-components": "^6.3.3",
    "react": "^16.10.1",
    "react-dom": "^16.10.1",
    "react-scripts": "3.1.2",
    "styled-components": "^4.4.0"

Tried in a brand new project using create-react-app.

Debugging notes:

• Works with styled-components version 3.4.10
• Breaks in styled-components version 4.0.0
• Seems like enzyme tests are disabled? 🤔 https://github.com/styled-components/jest-styled-components/blob/v4/test/styleSheetSerializer.spec.js#L186
• Cloned and added simple test case for enzyme shallow without using theme. Test produces similar snapshot as above.

[ryanzec]

Any update on this, getting same issue.

Also this seems to be specific to shallow render as enzyme's render method works and import ShallowRenderer from 'react-test-renderer/shallow'; result in the same issue as enzyme's shallow

[BenLorantfy]

@probablyup I think this should probably be higher priority, no?

[pjnovas]

so, I have been trying to get this working all day long .. just upgrade jest-styled-components to v7, then you will get an error, after searching around you also need styled-components v5 and everything is back to working 🤷‍♂️

hope it helps someone else