Jest-styled-components: toHaveStyleRule fails with media and supports option parameters

[erikvorhes]

Given this component:

// StickyDiv/index.js
import styled from 'styled-components';

const StickyDiv = styled.div`
  @media screen {
    @supports (position: sticky) {
      position: sticky;
    }
  }
`;

export default StickyDiv;

and this test:

// StickyDiv/__tests__/index.test.js
import * as React from 'react';
import { mount } from 'enzyme';
import 'jest-styled-components';

import StickyDiv from '../';

test('is sticky when supported', () => {
  const component = mount(<StickyDiv />);
  expect(component).toHaveStyleRule('position', 'sticky', {
    media: 'screen',
    supports: '(position: sticky)',
  });
});

The test fails with this message:

No style rules found on passed Component using options:
{"media":"screen","supports":"(position: sticky)"}

Tests pass if a component has either a media query or a feature query, but not when they are nested.

My project uses:

• React 16.8.6
• Jest 23.6.0
• Enzyme 3.9.0
• styled-components 4.2.0
• jest-styled-components 6.3.1

Is there a workaround for this scenario?

[erikvorhes]

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.

[dr3]

👋 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

[pjlee11]

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.

[baybara-pavel]

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",

[erikvorhes]

@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?

[baybara-pavel]

@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

[Radi-Mortada]

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"

[trouba]

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

npm ls styled-components

[nhardy]

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