[QUESTION] styled-component in another styled-component snapshot

[ZouYouShun]

Hi team, there is an issue from our project, if we styled a styled-component in another styled-component, there will generate that original sc- begin class name, how can I resolve that, that will update that class name every time when I add some file.

import 'jest-styled-components';

import React from 'react';
import renderer from 'react-test-renderer';
import styled from 'styled-components';

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

const Button = styled.button`
  color: red;
  ${Button2} {
    color: black;
  }
`;

test('it works', () => {
  const tree = renderer.create(<Button />).toJSON();
  expect(tree).toMatchSnapshot();
  expect(tree).toHaveStyleRule('color', 'red');
});

that result will be like below

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

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

.c0 .sc-bdnylx {
  color: black;
}

<button
  className="c0"
/>
`;

that sc-bdnylx is not I want, how can I resolve this issue?

"jest-styled-components": "7.0.3",
"styled-components": "5.2.0",

[wachunei]

Running into the same issue. I realized this because the .sc-bdnylx class is now diffing from my snapshots, although is not being used (now I'm getting .sc-bdfBwQ).

Code

Label is conditional:

https://github.com/wachunei/directUC/blob/3c43266ce32bddbb2471bc9b15cec59972350392/src/js/ui/components/FormControl.jsx#L28

When rendered .c0 and .c1 classes are generated and used correctly:

https://github.com/wachunei/directUC/blob/3c43266ce32bddbb2471bc9b15cec59972350392/src/js/ui/components/tests/snapshots/FormControl.test.jsx.snap#L108-L118

When not redered, .sc- class is generated and not used at all:

https://github.com/wachunei/directUC/blob/3c43266ce32bddbb2471bc9b15cec59972350392/src/js/ui/components/tests/snapshots/FormControl.test.jsx.snap#L26-L32

[chilled-capybara]

Related: #307 & #276