CODEWITHSUNDEEP
javascriptreactjsunit-testingenzyme
Leff
Leff

Reputation: 1350

Testing react component's number of children

I am writing a test in React for the first time, and I am wondering is there a way to test the number of children components of a children component inside the parent component, so to make it clear, this is how to component looks like, I have cut it down to the parts that are relevant to this question:

<Modal>
     <RadioGroupField direction="vertical" name={`${fieldId}.resultat`} bredde="M">
          <RadioOption label={{ id: 'UttakInfoPanel.SykdomSkadenDokumentertAngiAvklartPeriode' }} value />
          <RadioOption label={{ id: 'UttakInfoPanel.SykdomSkadenIkkeDokumentert' }} value={false} />
     </RadioGroupField>
</Modal>

So, when I am writing a test for the Modal component I would like to check if there is a correct number of children components of the RadioGroupField component:

import React from 'react';
import { expect } from 'chai';
import { shallowWithIntl } from 'testHelpers/intl-enzyme-test-helper';

import { Modal} from './Modal';

const periode = {
  fom: '2018-01-01',
  tom: '2018-03-01',
};
it('should show modal component', () => {
    const wrapper = shallowWithIntl(<Modal
      fieldId="periode[0]"
      resultat={undefined}
      periode={periode}
    />);

    const radioGroupField = wrapper.find('RadioGroupField');
    expect(radioGroupField).to.have.length(1);

  });

How can I write that test?

Update

I have tried with using name and not string for the component and dive method, but all of a sudden I get an error:

ReferenceError: RadioGroupField is not defined

This is my test:

it('skal vise sykdom og skade periode', () => {
    const wrapper = shallowWithIntl(<Modal
      fieldId="periode[0]"
      resultat={undefined}
      periode={periode}
    />);

    const textAreaField = wrapper.find('TextAreaField');
    const undertekst = wrapper.find('Undertekst');
    const radioGroupField = wrapper.find('RadioGroupField');
    const fieldArray = wrapper.find('FieldArray');
    const hovedknapp = wrapper.find('Hovedknapp');
    const knapp = wrapper.find('Knapp');
    const radioGroupFieldComponent = wrapper.find(RadioGroupField).dive();
    expect(radioGroupFieldComponent.children()).to.have.length(2);
    expect(textAreaField).to.have.length(1);
    expect(undertekst).to.have.length(1);
    expect(radioGroupField).to.have.length(1);
    expect(fieldArray).to.have.length(1);
    expect(hovedknapp).to.have.length(1);
    expect(knapp).to.have.length(1);
  });

Upvotes: 1

Views: 6332

Answers (2)

vapurrmaid
vapurrmaid

Reputation: 2307

In order to refer to components, use their name not a String as documented:

wrapper.find(Foo) // Foo component, not 'Foo'

I would like to check if there is a correct number of children components of the RadioGroupField component:

Use children() as documented in the enzyme API

const radioGroupField = wrapper.find(RadioGroupField).dive()
expect(radioGroupField.children()).to.have.length(2)

References:

EDIT: add dive() as this may be needed to render components (non-DOM nodes)

Update

I have tried with using name and not string for the component and dive method, but all of a sudden I get an error:

ReferenceError: RadioGroupField is not defined

Any components used in your tests need to be imported.

Here's an example:

Foo.js:

import React from 'react'

export const Bar = (props) => {
  return (
    <div>
      {props.children}
    </div>
  )
}

export const Baz = () => (
  <div>Foo</div>
)

export const Foo = () => (
  <Bar>
    <Baz />
    <Baz />
  </Bar>
)

export default Foo

Foo.test.js

import React from 'react'
import { shallow } from 'enzyme'
import Foo, { Bar, Baz } from './Foo'

it('Foos', () => {
  let wrapper = shallow(<Foo />)
  expect(wrapper.find(Bar)).toHaveLength(1) // jest syntax
})

Upvotes: 2

Roopak Puthenveettil
Roopak Puthenveettil

Reputation: 1475

This also works:

const radioOption = wrapper.find(RadioGroupField).dive().find(RadioOption);

Upvotes: 0

Related Questions