render multiple components with enzyme shallow

Question

Is it possible to render more tan one component using enzyme's shallow?

I have the following failing test:

  it('should have different ids for different checkboxes', () => {
      const wrapper = shallow(<div><Checkbox {...props} /><Checkbox {...props} /></div>)

    const inputs = wrapper.find('input')
    expect(inputs.length).toBe(1)
  })

Answer 1

I think you'll want to use enzyme's mount instead of shallow. This is assuming your Checkbox component is what will give you the input that your test is looking for. shallow doesn't render nested components. As its name suggests, it does a shallow render of what you pass to it. mount, on the other hand, will render nested components.

For more details on mount and shallow, check out their documentation: https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md

All that being said, if this is a unit test then it shouldn't care about the output of Checkbox. There would be unit tests for Checkbox to check its output.