toHaveStyleRule does not match media

[espretto]

Hi,

I found that .toHaveStyleRule does not match if the rule is a child of a @media rule and the enzyme element wrapper does not have a so called "static css class". The problem stems from this line: https://github.com/styled-components/jest-styled-components/blob/5497740f09449dd2087993deefae5d41001f76b9/src/toHaveStyleRule.js#L82. If staticClassNames is empty, the function hasClassNames will always return false. My guess is that a component does not have a static class if its attached styles have no static elements but are completely generated. Example:

const Example = styled.div<{ w: number }>`
  ${props => `@media (min-width:480px) { width: ${props.w}%; }`}
`;

A quick & hacky solution is to give the Example JSX tag a random class which matches the naming scheme *-sc-*.

reversion: [email protected]