toHaveStyleRule is not compatible with some displayNames if fileName is used

[kamaltmo]

Hello everyone!

We have recently tried to upgrade to v7 and styled-components v5 and this has resulted in some of our tests that use the toHaveStyleRule function to fail. The issue seems to be that we use babel-plugin-styled-components and our files are written in snake case, this leads to displayName like the following input-wrapper__InputWrapper for a file like input-wrapper.jsx with a component of InputWrapper. Styled-components then appends this to the componentId of sc-slq835-0 which results in a className of input-wrapper__InputWrapper-sc-slq835-0.

The current regex used for classNames is ^(\w+(-|_))?sc- this would correctly identify wrapper__InputWrapper-sc-slq835-0 but fails on our className due to the snakecase.

I propose we change this regex to check more generically for any string starting with sc- or containing -sc-, for example: (_|-)*sc-.+