It could be that this is an issue with css.parse(); the inner @rule has no style rules attached to it, at least in the output of getAtRule.

👋 I think we're having a similar issue, but with snapshot testing. It appears to fail with any 2 nested queries. Ive made a gist of our example

Following up on what @dr3 said, we are seeing this with any nested rules.

For example an @media nested in @media ends with the contents on the nested @media not being renderer in the snapshot test output.

Same issue with modifier option

const component = withRouter(withTheme(<ItemCard title="Some title" date="10.04.2019" data-testid="item-card" />));
const { container, getByTestId } = render(component);
expect(container).toMatchSnapshot();
expect(getByTestId('item-card')).toHaveStyle('border-left: 8px solid');
expect(getByTestId('item-card')).toHaveStyleRule('background', rgba('#fff',1), {
    modifier: ':before',
});

No style rules found on passed Component using options:
{"modifier":":before"}

  20 |     expect(container).toMatchSnapshot();
  21 |     expect(getByTestId('item-card')).toHaveStyle('border-left: 8px solid');
> 22 |     expect(getByTestId('item-card')).toHaveStyleRule('background', rgba('#fff', 1), {
     |                                     ^
  23 |       modifier: ':before',
  24 |     });
  25 |   });

Plus TS throw an errorProperty 'toHaveStyleRule' does not exist on type 'JestMatchersShape<Matchers<void, HTMLElement>, Matchers<Promise<void>, HTMLElement>>'.

"styled-components": "5.0.0",
"@testing-library/jest-dom": "5.0.2",
"jest": "25.1.0",
"jest-styled-components": "7.0.0",

@baybara-pavel — I’d love to see the code for your actual styled component, too, to confirm that it’s the same issue.

Regarding your TS error, I’ve run into that before as well — does it go away if your setupTests file is also open in your editor?

@erikvorhes yep, of course:

import { rgba } from 'polished';

export const ItemCard = styled.div`
  display: block;
  position: relative;
  min-height: 140px;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  border-left: 8px solid;
  padding: 24px 32px;
  padding-left: 24px;

  &:before {
        position: absolute;
        content: '';
        top: 0;
        left: -8px;
        width: 8px;
        height: 100%;
        background: ${rgba('#fff', 1)};
        border-radius: 4px;
      }
`;

I'm not sure about relation between setupTest and TS error but thanks for your suggestion, I'll try to check that variant and some others

The issue is re-produced with the following versions.

"react": "^16.13.1"
"styled-components": "^5.2.0"
"jest-styled-components": "^7.0.3"
"enzyme": "^3.11.0"
"jest": "^26.4.0"

I had the same issue, found out I had 2 versions of styled-components in package with:

npm ls styled-components

#354 has been updated to include a fix for both snapshots and the .toHaveStyleRule() assertion.