I was able to recreate this locally, but what I realized was the first 2 expects passed, whereas the last one did not. That was because the DESKTOP media query block is setting the background-color to "purple", whereas the expect is looking for "blue".

    background-color: purple;

    @media (max-width: ${DESKTOP}px) {
        background-color: purple;
expect(<Component />).toHaveStyleRule(
    { 'background-color': 'blue' },
    { media: `(max-width: ${DESKTOP}px)` }

Let me know if that's not the problem you are actually seeing.

Related Query

More Query from same tag