How can I test a React component that has "children"?
I have a Center component, which basically wraps an element (children)
This is the Center component:
const Center = ({ children }) => (
<div className='center'>
<div className='center__content'>{children}</div>
</div>
)
Below is the code I have tried, but I got an error "Invalid attempt at 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 do I access this 'center__content' ?
expect(div.props.className).to.equal('center__content')
})
})
})
Aucun commentaire:
Enregistrer un commentaire