title: React Enzyme Jest test component with className
body: <p>I am 
  Following both the Enzyme examples for <a href="http://airbnb.io/enzyme/docs/api/ShallowWrapper/find.html" rel="noreferrer">.find()</a> and this GitHub <a href="https://github.com/vjwilson/enzyme-example-jest" rel="noreferrer">enzyme-example-jest</a> example to get a basic component to test and verify the outer-most element <code>className</code> exists, I do not understand why this does not pass:</p>
  
  <p>// REACT COMPONENT</p>
  
  <pre><code>class VisitorShortcut extends Component {
  //all the props &amp; lifecycle hooks here
  render() {
          return (
              &lt;div className="visitor-shortcuts"&gt; // &lt;-- this className is being tested
                  &lt;div
                      onClick={e =&gt; e.stopPropagation()}
                      className="dropdown open"
                  &gt;
                      &lt;ul
                          style={style}
                          ref="shortcutContainer"
                          className={"dropdown-menu "}
                      &gt;
                          {results}
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>// TEST FILE</p>
  
  <pre><code>import React from "react";
  import { shallow, mount } from "enzyme";
  import VisitorShortcut from "../VisitorShortcut";
  
  describe("Shortcuts", () =&gt; {
    test("The main Class exists", () =&gt; {
      expect(
          (&lt;VisitorShortcut /&gt;).find(".visitor-shortcuts").length
      ).toBe(1);
    });
  });
  </code></pre>
  
  <p>// OUTPUT</p>
  
  <pre><code>Expected value to be (using ===):
    1
  Received:
    0
  </code></pre>
  
  <p>if I switch to <code>expect(wrapper.find('div.some-class')).to.have.length(3);</code> as per Enzyme docs, the output is <code>TypeError: Cannot read property 'have' of undefined</code></p>
  
  <p>I am fairly sure I do not need to use the <code>mount</code> API instead of <code>shallow</code></p>
  
  <p>Thanks for helping to clarify this.  It seems so basic...</p>