1

I'm using styled components and jest+enzyme+jest-styled-components to test my components. I want to be able to shallow render components and use snapshot testing:

  const wrapper = shallow(<MyStyledComponent someProp>ASDF</MyStyledComponent>);
  expect(wrapper).toMatchSnapshot();

The resulting snapshot is:

// Jest Snapshot v1

exports[`default 1`] = `
<ComponentStyles__MyStyledComponent>
  <ComponentStyles_Bla>
    ASDF
  </ComponentStyles_Bla>
</ComponentStyles__MyStyledComponent>

The problem is that the styling is not included. What i'm trying to reach is that my snapshots include the actual css of the styled component. Using enzyme's mount I was able to see the css nicely in the snapshot:

exports[`style2 1`] = `
.c0 {
  padding: 12px 16px;
  z-index: 1;
  font-size: 16px;
}

<div
  className="c0"
>
  ...
</div>
`;

But it's important for me to render shallow only, and when I use shallow I see only the component without the css (as above).

Also tried with enzyme's dive method without success. So, is there any way to shallow render a styled component and get the css in the snapshot?

Jenian
  • 552
  • 1
  • 5
  • 18
  • Could this help https://github.com/styled-components/jest-styled-components/issues/145#issuecomment-394927582 ? – Dario Apr 30 '20 at 08:10
  • the issue is regarding deep rendering. I'm trying to do it with shallow rendering. – Jenian Apr 30 '20 at 08:32

0 Answers0