title: test count of react components within a component
body: <p>I have a form in which I have two Select Components. I am trying to write a test to check if Form is rendering both the components.</p>
  
  <p>short code snippet for <strong>FormComponent</strong>:</p>
  
  <pre><code>export class FormComponent extends Component {
  
  render() {
          return (
              &lt;Form header="hdr"&gt;
                  &lt;SelectField
                              label='lable1'
                              onChange={this.handleFormChange}
                              /&gt;
  
                   &lt;SelectField
                              label='label2'
                              onChange={this.handleFormChange}
                              /&gt;
             &lt;/Form&gt;
          );
      }
  }
  </code></pre>
  
  <p>short code snippet for <strong>SelectField</strong>:</p>
  
  <pre><code>export const SelectField = (props) =&gt; &lt;FormField label={props.label}&gt;
                                          &lt;Select /&gt;
                                        &lt;/FormField&gt;
  </code></pre>
  
  <p>code snippet for <strong>the test</strong>:</p>
  
  <pre><code>import React from "react";
  import { mount, render, shallow } from "enzyme";
  import { FormComponent } from "../../../src/components/mdm/FormComponent";
  import { SelectField } from "../../../src/components/mdm/SelectField";
  
  describe("FormComponent", () =&gt; {
    it('renders components', () =&gt; {
      const element = shallow(&lt;FormComponent /&gt;);
      expect(element.find(SelectField)).to.have.lengthOf(2);
    });
  });
  </code></pre>
  
  <hr>
  
  <p>I am getting below <strong>error</strong>:</p>
  
  <pre><code> FAIL  test/components/mdm/FormComponent.test.jsx
    FormComponent
      ✕ renders components (74ms)
  
    ● FormComponent › renders components
  
      TypeError: Cannot read property 'have' of undefined
  
        18 |     const element = shallow(&lt;FormComponent /&gt;);
      &gt; 19 |     expect(element.find(SelectField)).to.have.lengthOf(2);
  </code></pre>
  
  <p>I tried with <strong>mount</strong> as well but same error.</p>
  
  <p>I even did <strong>console.log</strong> in test <code>console.log(element.debug())</code> which was showing the component, log output:</p>
  
  <pre><code>    &lt;Form header="hdr"&gt;
            &lt;SelectField label="lable1" onChange={[Function]} /&gt;
            &lt;SelectField label="label2" onChange={[Function]} /&gt;
  </code></pre>
  
  <hr>
  
  <p>Though <code>expect(element.find(SelectField).exists()).toBeTruthy();</code> works!</p>