Sometimes getClassNames throws error about jest-styled-components HOT 7 CLOSED

Hello @yanawaro, any chances you could provide a non-working example? or the output of wrapper.debug()?
To me, it seems that the first find doesn't actually find anything in your case.

In general, performing a second find is not a problem.
For example, the following code works:

const TabButtonGroup = styled.div`
  color: red;
`
const Autocomplete = () =>
  <div>
    <TabButtonGroup />
  </div>

const wrapper = mount(<Autocomplete />)
expect(wrapper.find(TabButtonGroup)).toHaveStyleRule('color', 'red')

Also, I tend to avoid using the internals whenever it's possible.

from jest-styled-components.

@MicheleBertoli from last comment, I prefer not using the internals too 👍 . Let's see if this is a problem and how can we fix.

I think I found something. Not sure if it has something to do with using the styled-components overriding api.
And not sure if .find('[className]').first().prop('className') works in these situation.

Ex1: I ran this basic example which produces the same errors as above.

const Component = () => (
  <div />
)
    
const Override = styled(Component)`
  display: none;
`

const wrapper = mount(<Override />)
expect(wrapper.find(Override)).toHaveStyleRule('display', 'none')

When using wrapper.find(Override) like this, I expected it to get the styles of Override component

Errors:

Debug (wrapper):

Ex-2: Modified the component to pass thru classnames

const Component = ({className}) => (
  <div className={className} />
)
    
const Override = styled(Component)`
  display: none;
`

const wrapper = mount(<Override />)
expect(wrapper.find(Override)).toHaveStyleRule('display', 'none')

And it passes!

Ex-3: Having some styled-components inside, but not passing thru classnames

const Base = styled.div`
  display: inline-block;
`

const Component = () => (
  <div/>
    <Base />
  <div/>
)
    
const Override = styled(Component)`
  display: none;
`

const wrapper = mount(<Override />)
expect(wrapper.find(Override)).toHaveStyleRule('display', 'none')

It could find a component but wrong one!, and reads out the styles of the wrong element. (It gets the displays from <Base />)

It seems that it leads to selecting wrong elements and asserting wrong styles?

from jest-styled-components.

Thank you very much for the comment and the examples @yanawaro.

If you use the styled function on a component that doesn't accept the className prop, no styles are applied to it. Therefore the test (1) doesn't pass, while the (2) passes. This is the expected behavior. I'm going to handle the case on the library side.

In the example (3) again the component doesn't accept any className, and the library tries to get the styles from the first element that has the prop. I agree this could be implemented differently, but it was an easy win to make it work transparently with Enzyme's mount, themes, etc.
Also, using the className in the proper way fixes the issue.

from jest-styled-components.

In v4.1.2, the example (1) now gives:

Property not found: "display"

Thank you very much!

from jest-styled-components.

@MicheleBertoli Sorry for commenting on a close thread.

Thanks for you explanation! I now understand and agreed with behavior with passing thru / not passing thru classnames. Because if using the override api, should work on overriding other styled components. But creating our own components it's right to pass thru classname prop.

I've been trying to reproduce this error, It seems that I only happens in this situation. I don't know if you had encounter something like this.

// this code is in a fully state component and exports as Suggest
const Root = styled.ul``
const Item = styled.li``
render (
  <Root show={isShow} className={this.props.className}>
    {suggests.length && suggests.map(suggest => <Item>{suggest}</Item>)}
  </Root>
)

Another component uses it with overriding as

const SearchSuggest = styled(Suggest)`
  display: ${props => (props.show === true) ? 'block' : 'none'};
`
SearchSuggest.displayName = 'SearchSuggest'

If the suggests array is empty, from this debugging output, it seems it doesn't render <ul> element. So it cannot find it styles. (I tried to change ul to div, but it has noting to do.)

Compare to if it has suggest items, debugging shows it has items, so it can find its style.

I use mount() for tests
Is this strange? or it maybe with my coding.

from jest-styled-components.

This is weird, and I wouldn't expect it to happen - especially with mount.

Also, I tried to repro the issue with the code you provided:

const Root = styled.ul``
const Item = styled.li``

class Suggest extends React.Component {
  render() {
    const { isShow, suggests } = this.props
    return (
      <Root show={isShow} className={this.props.className}>
        {suggests.length &&
          suggests.map(suggest =>
            <Item>
              {suggest}
            </Item>
          )}
      </Root>
    )
  }
}

const SearchSuggest = styled(Suggest)`
  display: ${props => (props.show === true ? 'block' : 'none')};
`
SearchSuggest.displayName = 'SearchSuggest'

And when I log the output of the debug function:

console.log(mount(<SearchSuggest suggests={[]} />).debug())

I get this, which seems right.

<SearchSuggest suggests={{...}}>
  <Suggest className="sc-htpNat irkcXP" suggests={{...}}>
    <styled.ul show={[undefined]} className="sc-htpNat irkcXP">
      <ul className="sc-htpNat irkcXP sc-bdVaJa bDWFJH" />
    </styled.ul>
  </Suggest>
</SearchSuggest>

Maybe the problem is somewhere else.

from jest-styled-components.

@MicheleBertoli Thanks for your help, I'll try to see further what went wrong. 😂

from jest-styled-components.