@compiled/jest toHaveCompiledCss does not support advanced uses of ampersand

[dddlr]

toHaveCompiledCss supports checking if a pseudo-selector has certain styles applied: https://compiledcssinjs.com/docs/pkg-jest#pseudo-selectors

With that in mind, we expect this Jest code to work:

const { getByText } = render(
  <div
    css={{
      '&:hover': {
        color: 'red',
      },
    }}>
    hello world
  </div>
);

const el = getByText('hello world');

expect(element).toHaveCompiledCss('color', 'red', {
  target: 'body &:hover',
});

However, toHaveCompiledCss doesn't know how to determine that body &:hover matches the el component. We should either extend toHaveCompiledCss to support this use case, or give an explicit error telling developers that this is not supported.

(Perhaps leaning towards the latter, as we want to discourage people from using nested / complicated selectors as part of the UI Styling Standard)