These are chat archives for airbnb/enzyme

27th
Jun 2017
Vamsi Ampolu
@vamsiampolu
Jun 27 2017 10:54

How do I get only the direct children of an component when using enzyme mount:

I am trying to test a styled component:

export const StyledCheckboxGroup = styled(CheckboxGroup)`
> .ant-checkbox-group-item {
display: ${props => (props.inline ? 'inline-block' : 'block')};
}
`
it('renders an inline widget with the appropriate style rules', () => {
  const options = {
    enumOptions: [
      {
        value: 'one',
        label: 'One'
      },
      {
        label: 'Two',
        value: 'two'
      }
    ],
    inline: true
  }

  const wrapper = mount(<Checkboxes options={options} />)
  const item = wrapper.find(StyledCheckboxGroup)

  // SUBJECT has a length of 0
  const subject = item.find('> .ant-checkbox-group-item')

  expect(subject).toHaveStyleRule('display', 'inline-block')
})
Vamsi Ampolu
@vamsiampolu
Jun 27 2017 11:00
I have also tried item.children().filter('.ant-checkbox-group-item') which returns 0for subject.length and the code `item.find('.ant-checkbox-group-item') gets a value of 2 when I check for length.
Vamsi Ampolu
@vamsiampolu
Jun 27 2017 18:48
When I try to toHaveStyleRule with the jest-styled-components on subject:
const subject = item.find('.ant-checkbox-group-item')
expect(subject).toHaveStyleRule('display', 'inline-block')