Jest - toHaveStyleRule no longer works with css prop

[theboyWhoCriedWoolf]

I have recently updated to the most recent styled-components & jest-styled-components. Now all previously working tests using toHaveStyleRule fail on all components that have their styles set using the css prop.

For example:

const StyledComp = styled('div')`
    // SOME STYLES
`

function SomeOtherComp(props) {
   return <StyledComp css="font-size: 20px;" { ...props } />
}

Within Jest now running the following fails and returns "font-size: undefined".

it('Should find the style', () => {
     const wrapper = renderer.create(<SomeOtherComp />).toJSON();
     expect(wrapper).toHaveStyleRule('font-size', '20px');
})

[ghost]

I think we have raised a similar issue here:

https://github.com/styled-components/jest-styled-components/issues/191

Although this has been closed we still have the same bug as labelled above.

[fabb]

I also have this issue:

const MyComponent: FunctionComponent<{ className?: string }> = ({ className }) => <div className={className} />

const MyStyledComponent = styled(MyComponent)<{ position: string }>`
    position: ${p => p.position};
    border: none;
`

const MyWrapper: FunctionComponent<{}> = () => (
    <MyStyledComponent
        position="static"
        css={css`
            display: none;
        `}
    />
)

it('does not capture the css prop styles', () => {
    const { container } = renderWithProviders(<MyWrapper />)
    expect(container.firstChild).toMatchSnapshot()
})

The snapshot looks like this:

exports[`Grid does not capture the css prop styles 1`] = `
.c0 {
  position: static;
  border: none;
}

<div
  class="c0"
/>
`;

The display: none rule and class are missing from the snapshot.