title: How to find element with enzyme in reactjs app?
body: <p>In my react app I have a Container component with a couple of selects:</p>
  
  <pre><code>import React, { Component } from "react";
  import DebtType from "./DebtType";
  import mockOptions from "./mockData.json";
  import ClearDebtType from "./ClearDebt";
  import { reduxForm, formValueSelector, Field } from "redux-form";
  import { connect } from "react-redux";
  
   export class MyContainer extends Component {
    handleChangeDebtType = event =&gt; {
      console.log("handleChangeDebtType value", event.target.value);
      this.props.change("debtType", event.target.value);
      if (event.target.value === "4" || event.target.value === "5") {
        this.props.change("newLimit", 0);
      }
      if (
        event.target.value === "0" ||
        event.target.value === "3" ||
        event.target.value === "7"
      ) {
        this.props.change("newLimit", this.props.currentLimit);
      }
  
      if (
        event.target.value === "1" ||
        event.target.value === "2" ||
        event.target.value === "6"
      ) {
        this.props.change("newLimit", "");
      }
    };
  
    render() {
    const { debtType, newLimit } = this.props;
  
      return (
        &lt;div&gt;
          &lt;DebtType
            options={mockOptions.DEBT_TYPE}
            handleChangeDebtType={this.handleChangeDebtType}
          /&gt;
  
          {(debtType === "1" || debtType === "2") &amp;&amp; (
            &lt;ClearDebtType options={mockOptions.CLEARDEBT_TYPE} /&gt;
          )}
  
  
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>These are the selectcomponents:</p>
  
  <pre><code>import React from "react";
  
  const ClearDebt = ( options) =&gt; {
  console.log(options)
    return (
      &lt;select&gt;
        {options.options.map(option =&gt; {
          return &lt;option&gt;{option.label}&lt;/option&gt;;
        })}
      &lt;/select&gt;
    );
  };
  
  export default ClearDebt;
  
  import React from "react";
  
  const DebtType = ({options, handleChangeDebtType}) =&gt; {
    console.log(options);
  
    return (
      &lt;select onChange={handleChangeDebtType}&gt;
        {options.map(option =&gt; {
          return &lt;option value={option.value}&gt;{option.label}&lt;/option&gt;;
        })}
      &lt;/select&gt;
    );
  };
  
  export default DebtType;
  </code></pre>
  
  <p>In my jest unit test I want to test the visibility of the second select(depending on the selected value for the 1st select):</p>
  
  <pre><code>describe('Container component', () =&gt; {
      it('should show the second select component', () =&gt; {
          const myComp = shallow(&lt;MyContainer debtType={"1"}/&gt;);
          //question: how can I find the second select in the browser?
          //https://airbnb.io/enzyme/docs/api/ReactWrapper/find.html
          const result = myComp.find('#root &gt; div &gt; div &gt; select:nth-child(2)')   
          console.log('result',result.length)
          expect(result.length ).toEqual(1)
      });
    });
  </code></pre>
  
  <p>The issue is that I cannot find the element with this statement:</p>
  
  <pre><code> const result = myComp.find('#root &gt; div &gt; div &gt; select:nth-child(2)')  
  </code></pre>
  
  <p>This is the result of the test:</p>
  
  <pre><code> Container component › should show the second select component
  
      expect(received).toEqual(expected)
  
      Expected: 1
      Received: 0
  </code></pre>
  
  <p>How to select the second listbox?
  Btw I am open to other test frameworks.</p>