No style rules when testing directly a styled components from babel macro

[dorianamouroux]

I'm currently updated styled-components of my project to the latest version ("jest-styled-components": "^7.0.2" & "styled-components": "^5.1.1").

Although the great majority of my tests pass, some of them have the following error message: No style rules found on passed Component.

After investigation, I noticed the only failing tests were the one where the styled components is exported directly, which are styled-components created with the babel macro. I tried to create those components without the babel macro and the tests are passing.

I created a repository to reproduce the bug:

https://github.com/dorianamouroux/styled-components-test-issue

The component:

import styled from 'styled-components'
import styledMacro from 'styled-components/macro'

export const Tag = styled.div`
  background-color: orange;
`

export const TagMacro = styledMacro.div`
  background-color: orange;
`

The spec:

import React from 'react'
import { shallow } from 'enzyme'

import { Tag, TagMacro } from './Tag'

describe('Tag', () => {
  it('no macro - has the right color', () => {
    // test passes, no babel macro
    expect(shallow(<Tag />)).toHaveStyleRule('background-color', 'orange')
  })

  it('macro - has the right color', () => {
    // fail, with the babel macro
    expect(shallow(<TagMacro />)).toHaveStyleRule('background-color', 'orange')
  })

  it('macro - has the right color', () => {
    // test passes, with a work around
    function WrapperTag() {
      return <TagMacro />
    }
    expect(shallow(<WrapperTag />).find(TagMacro)).toHaveStyleRule('background-color', 'orange')
  })
})

I'm using Enzyme, React and Styled-components macro. All with the latest version.

[VarunBalakrishna]

+1 same issue for me

[VarunBalakrishna]

I posted a workaround for this here: #290 (comment)

[Tokimon]

And i have posted the actual reason for this here (it is due to too aggressive class name filtering really):
#297 (comment)