toHaveStyleRule TypeError: Cannot read property '1' of null

[RIP21]

I'm trying to test whether the component has display:inline when horizontal is set to true.
Here is the component code:

export const StyledLabel = styled.label`
  display: block;
  ${props => props.horizontal && css`
      display: inline;
  `}
  & i {
    color: red;
  }
  ${props => props.css}
`;

And here is the test:

import { StyledLabel } from "./Label";
import React from "react";
import { mount } from "enzyme";

test("when horizontal must be display:inline", () => {
  //given
  const text = "text";
  //when
  const component = mount(<StyledLabel horizontal>{text}</StyledLabel>);
  //then
  expect(component).toHaveStyleRule("display", "inline");
});

But at the end I got an error:

 FAIL  src\components\Label\index.test.js
  ● <Label /> › when horizontal must be display:inline

    TypeError: Cannot read property '1' of null

      at message (node_modules/jest-styled-components/src/matchers/toHaveStyleRule.js:79:48)
      at Object.it (src/components/Label/index.test.js:73:23)
          at Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:169:7)

I have "jest-styled-components": "^3.0.0" and "styled-components": "^2.0.0" and latest CRA.

[leocreatini]

I was able to get passing test with it:

import styled, { css } from 'styled-components' // ^2.0.0
import { mount } from 'enzyme'  // ^2.8.2
import 'jest-styled-components' // 3.0.0

test('enzyme', () => {
  const StyledLabel = styled.label`
    display: block;
    ${props => props.horizontal && css`
        display: inline;
    `}
    & i {
      color: red;
    }
    ${props => props.css}
  `
  const wrapper = mount(<StyledLabel horizontal>Hello World</StyledLabel>)

  expect(wrapper).toHaveStyleRule('display', 'inline')
})

Maybe try npm cache clean or reinstalling the packages?

[RIP21]

I'm just rerun your test (the only thing I add is import of React at the top, cause it argues without it)
And the result is exactly as mine. After I delete node_module and reinstall it using yarn install I got exactly the same output as before.
Also, I have latest npm 5.0.3 and yarn and node version 8.0.0, and Windows 10 machine which can also be a case.

[rikukissa]

I noticed the same thing today when I was updating my tests. I have a fix for this, but I'm not 100% sure what is causing it. Currently trying to reproduce this so I'll be able to send a PR.

[jjanssen]

I have put together a small repository for reproduction at: https://github.com/jjanssen/jest-styled-components-example. In this repository is example with a css helper (Example) and just a plain component (Example2). Both of them are tested with react-test-renderer and enzyme and both of them fail for each component.

Locally I also applied the change as proposed in PR #27 but this does not yet solve the issue. Right now it feels like the matching of the regular expression is not correct, although I'm not completely sure since I'm not too familiar with the styled-components internals.

[MicheleBertoli]

Thank you very much @jjanssen, your repo is exactly what we needed.
It looks like in styled-components v2.0.1 there's no space anymore between the class name and the bracket.