javascript - React test component with children -

how can test react component has "children"?

i have center component, wraps element (children)

this center component:

const center = ({ children }) => (   <div classname='center'>     <div classname='center__content'>{children}</div>   </div> ) 

below code have tried, got error "invalid attempt @ destructure non-iterable instance"

function setup () {   const props = {}   const renderer = testutils.createrenderer()   renderer.render(<center {...props}><p>hi</p></center>)   const output = renderer.getrenderoutput()    return {     props,     output   } }  describe('(components)', () => {   describe('center', () => {     it('should render correctly', () => {       const { output } = setup()        expect(output.type).to.equal('div')       expect(output.props.classname).to.equal('center')        const [ div ] = output.props.children // error triggered here, how access 'center__content' ?       expect(div.props.classname).to.equal('center__content')      })   }) }) 

a react component's children this.props.children can 1 of 2 types:

• an array
• a single child (in instance there no child)

see react documentation more information

therefore de-referencing statement have causing error this.props.children not object div attribute defined.

i'd advise inspecting output.props.children looks doing console.log(output.props.children).

your tests on output.props.children should like:

expect(this.props.children.type).to.equal('p'); // child element passed center component.