toHaveStyleRule errors if component is empty

[guyfedwards]

When the component that has .toHaveStyleRule call on it, it errors. As you can see below, expect(wrapper.find('Input__ValidationMessage').length).toBe(1) passes.

Adding some child text to the component causes the test to pass.

[MicheleBertoli]

Thank you very much for opening this issue, @guyfedwards.
Do you mind sharing your component and test so that I can repro?

[guyfedwards]

Sure @MicheleBertoli, you can find the component here and the test here. You can see the second to last test case is the culprit, with a comment referencing this issue.

If you want to clone the repo, the relevant branch is react-16.5-enzyme

[MicheleBertoli]

Hello @guyfedwards, I saw that weaveworks/ui-components#379 was merged.
Can we close this, or does the issue still persist?

[guyfedwards]

Oh sorry, I probably deleted the branch 🤦‍♂️ The issue still persists and you can see on master component & test

Thanks @MicheleBertoli

[MicheleBertoli]

Thanks for providing more information, @guyfedwards.
Unless I'm missing something, the test is passing on master, right?
(I cloned the repo and it seems to work as expected)

In any case, my recommendation is to set the displayName, like:

ValidationMessage.displayName = 'ValidationMessage'

And then:

expect(wrapper.find('ValidationMessage')).toHaveStyleRule(
  'visibility',
  'visible'
);

[guyfedwards]

@MicheleBertoli The test passes as I have added the following lines to make it pass:

      // https://github.com/styled-components/jest-styled-components/issues/189
      message: 'Derp!',

That comment referencing this issue as the reason for the content being set.
If you remove the message, thus setting the content to be empty, then the test fails.

Apologies for not being clearer.

[MicheleBertoli]

Yay! Found the issue, and fixed it.
Please install v6.2.1.
Thank you very much, @guyfedwards.