1

Assume i have a simple component I wish to snapshot test:

const Component = styled.div`{
  color: red;
}`

My snapshot test wishes to ensure that the div renders, but the styling is not important. So if I did a snapshot test on this Component, and i changed color from red to blue, and a new classname is generated, it would not fail the snapshot test.

In short, is there any way I can either ignore className in snapshot tests, or tell styled-components to generate static class names to be deterministic in tests?

plusheen
  • 1,128
  • 1
  • 8
  • 23

1 Answers1

1

I think what you are looking for is the jest-styled-components package which does exactly this.

For an example like yours, this would result in a snapshot like this:

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

<div
  className="c0"
/>
`;

where c0 is always stable.

swissspidy
  • 134
  • 9