Jest-styled-components: Snapshot is missing css/styles when using shallow from enzyme

[chhuang]

When I do:

import { shallow } from 'enzyme'

test('it works', () => {
  const wrapper = shallow(<Button />)
  expect(wrapper).toMatchSnapshot()
})

I only get:

exports[`Button renders correctly Renders correctly as a link 1`] = `<Button____Button />`;

It's fine if I use renderer from react-test-renderer:

const wrapper = renderer.create(<Button />).toJSON()
expect(wrapper).toMatchSnapshot()

[MicheleBertoli]

Hello @chhuang , can you please provide more information about your Button component?

When I run the following code:

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

test('it works', () => {
  const wrapper = shallow(<Button />)
  expect(wrapper).toMatchSnapshot()
})

My snapshot looks like this (as expected):

exports[`it works 1`] = `
.c0 {
  color: red;
}

<button
  className="c0"
/>
`;

Thank you very much!

[carloscheddar]

I'm experiencing this issue as well and managed to reproduce it on code sandbox. I added 2 test cases 1 for enzyme and another for react-test-renderer. You can see the difference in the snapshot results on the test output https://codesandbox.io/s/o5ko8vlp39.

Edit:
The codesandbox specs seem to have been broken but you can see the output here:

Code

//Hello.js
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  color: red;
  padding: 10px;
`;

class Hello extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello {this.props.name}!</h1>
        <Button>Test</Button>
      </div>
    );
  }
}

export default Hello;

//Hello.test.js
import Adapter from "enzyme-adapter-react-16";
import React from "react";
import renderer from "react-test-renderer";
import { configure } from "enzyme";
import { shallow } from "enzyme";
import toJson from "enzyme-to-json";
import Hello from "./Hello";
import "jest-styled-components";

configure({ adapter: new Adapter() });

describe("<Hello /> enzyme snapshot", () => {
  it("serializes the styles", () => {
    const output = shallow(<Hello name="Test" />);
    expect(toJson(output)).toMatchSnapshot();
  });
});

describe("<Hello /> test renderer snapshot", () => {
  it("serializes the styles", () => {
    const output = renderer.create(<Hello name="Test" />);
    expect(output).toMatchSnapshot();
  });
});

Snapshots

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

exports[`<Hello /> enzyme snapshot serializes the styles 1`] = `
<div>
  <h1>
    Hello 
    Test
    !
  </h1>
  <Button>
    Test
  </Button>
</div>
`;

exports[`<Hello /> test renderer snapshot serializes the styles 1`] = `
.c0 {
  color: red;
  padding: 10px;
}

<div>
  <h1>
    Hello 
    Test
    !
  </h1>
  <button
    className="c0"
  >
    Test
  </button>
</div>
`;

[MicheleBertoli]

Thank you very much @carloscheddar for providing detailed repro code.

The reasons why there's no style in the first snapshot are:

• Hello is not a styled-component
• you are shallow rendering

That's the expected behaviour.

If you try using mount you'll see the styles in the snapshot.

[rjohnep]

Hi @MicheleBertoli
I have a similar problem with snapshots.
react-test-renderer generate right snapshots unlike enzyme

//react-test-renderer
.c0 {
  color: red;
}

<button
  className="c0"
/>


//****** VS ******//


//enzyme && enzyme-to-json
<StyledComponent
  forwardedComponent={
    Object {
      "$$typeof": Symbol(react.forward_ref),
      "attrs": Array [],
      "componentStyle": ComponentStyle {
        "componentId": "sc-bdVaJa",
        "isStatic": false,
        "rules": Array [
          "
  color: red;
",
        ],
      },
      "displayName": "styled.button",
      "foldedComponentIds": Array [],
      "render": [Function],
      "styledComponentId": "sc-bdVaJa",
      "target": "button",
      "toString": [Function],
      "warnTooManyClasses": [Function],
      "withComponent": [Function],
    }
  }
  forwardedRef={null}
/>

Can you check it?
In relation mount - no problem.
https://codesandbox.io/s/9jxq3j39yp?module=%2Fsrc%2Findex.test.js&previewwindow=tests

Regards

[MicheleBertoli]

Thanks for your comment, @rjohnep.
Styled Components v4 is not fully supported yet (especially with Enzyme).

[Jose-Bustamante]

Hi @MicheleBertoli is there any update when this could be fixed?

This is how my snapshot looks like when using Shallow, I am not sure if I could be doing something wrong.
Styled-components v: 4.1.1
<styles__StyledCartTotal> <styles__StyledCartTotalBody> <styles__OrderValue> <P> <Connect(branch(TranslationTextComponent)) defaultMessage="Order value ex. VAT" id="checkout.orderTotalExclTax" /> </P> <styles__Price> 20 </styles__Price> </styles__OrderValue> </styles__StyledCartTotalBody> </styles__StyledCartTotal>

import renderer from 'react-test-renderer';
works fine, also enzyme mount, is just a bit annoying to mock the store the whole time 😣

Could we re-open it? the issue don't seems to be solved.

Thanks.