Jest-styled-components: toHaveStyleRule doesn't work with rules with increased specificity

[yobacca]

Hi,

I want to test the following component which has a rule with increased specificity:

const StyledBodyCopy = styled(BodyCopy)`
  && {
    color: red;
  }
`;

There's also a test to ensure that the color rule is set on the component:

      const { queryByText } = render(<StyledBodyCopy>text</StyledBodyCopy>);
      expect(queryByText('text')).toBeInTheDocument();
      expect(queryByText('text')).toHaveStyleRule('color', 'red');

However, the last check toHaveStyleRule('color', 'red') fails with the following:

   "Property 'color' not found in style rules"

    Expected
      "color: inherit"
    Received:
      "color: undefined"

But the rule is present in the snapshot:

.c0.c0 {
  color: red;
}

<p
  class="c0"
>
  text
</p>

However, if I remove the ampersands, the check succeeds:

const StyledBodyCopy = styled(BodyCopy)`
  color: red;
`;

[MikeThuchchai]

Could you try with modifier: '&&',

    expect(queryByText('text')).toHaveStyleRule('color', 'red', {
      modifier: '&&',
    });

In my case, it's working.

[yobacca]

Ah, didn't know about the third argument. This does the trick. 👍