title: Can't find element in jest even though wrapper.debug() shows it
body: <p>I am trying to access a <code>Dropdown</code> with <code>name=genes</code> property using <code>jest</code>:</p>
  <pre><code> beforeEach(() =&gt; {
      const middlewares = [thunk]
      const store = configureStore(middlewares)(STATE1)
      wrapper = mount(
        &lt;Provider store={store} &gt;
          &lt;SavedVariants match={INIT_MATCH_PROPS} {...stateProps} {...dispatchProps} /&gt;
        &lt;/Provider&gt;
      )
      //console.log(wrapper.debug())
    })
  
  
  it('selects genes in the genes dropdown', () =&gt; {
      const selector = `Dropdown[name='genes']`
  
      const genesDropdownBefore = wrapper.find(selector)
      console.log(genesDropdownBefore)
  })
  </code></pre>
  <p><code>console.log()</code> shows an empty object, so it can't find it. If I supply the class <code>Dropdown</code> (<code>semanti-ui-react</code>) it is not working either. When I do <code>wrapper.debug()</code> I see the dropdown, here is the excerpt:</p>
  <pre><code>...
      &lt;Dropdown aria-describedby={{...}} aria-invalid={true} selection={true} fluid={true} 
  meta={{...}} onChange={[Function]} name=&quot;genes&quot; onBlur={{...}} onDragStart={[Function]} 
  onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; placeholder=&quot;Select genes&quot; 
  renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true} options={{...}} noResultsMessage={{...}} tabIndex=&quot;0&quot; content={[undefined]} disabled={[undefined]} required={[undefined]} type={[undefined]} id={[undefined]} additionLabel=&quot;Add &quot; additionPosition=&quot;top&quot; closeOnBlur={true} closeOnEscape={true} deburr={false} icon=&quot;dropdown&quot; minCharacters={1} openOnFocus={true} searchInput=&quot;text&quot; selectOnBlur={true} selectOnNavigation={true} wrapSelection={true}&gt;
                                                                            &lt;Ref innerRef={{...}}&gt;
                                                                              &lt;RefFindNode innerRef={{...}}&gt;
  ...
  </code></pre>
  <p>I looked into <code>html</code> when its rendered in <code>Chrome</code> and also tried selecting it like that:</p>
  <pre><code>const selector = `div[name='genes']`
  const genesDropdownBefore = wrapper.find(selector)
  </code></pre>
  <p>No success. What else could I try?</p>
  <blockquote>
  <p>Update</p>
  </blockquote>
  <p>Tried to use <code>id</code>:</p>
  <pre><code>const selector = '#geneSearchField'
  const genesDropdownBefore = wrapper.find(selector)
  console.log(genesDropdownBefore)
  </code></pre>
  <p>I verified using <code>wrapper.debug()</code> that the <code>Dropdown</code> has <code>id=&quot;geneSearchField&quot;</code>. The selection was still empty. I also tried a different selector with no success:</p>
  <pre><code>wrapper.findWhere(n =&gt; n.name() === 'Dropdown' &amp;&amp; n.prop('name') === 'genes')
  </code></pre>
  <p>that I found in this thread: <a href="https://stackoverflow.com/questions/40776121/enzyme-is-not-finding-component-by-props">Enzyme is not finding component by props</a></p>