title: Testing React Component className with enzyme
body: <p>When testing a react component which uses className to set the css class using enzyme (mount or shallow) I'm able to test correctly when it's a div but unable to get it to work on an h1 tag.</p>
  
  <p>Is this some</p>
  
  <ul>
  <li>thing to do with mount or shallow?</li>
  <li>Is it something I'm missing? </li>
  <li>Is it a bug?</li>
  </ul>
  
  <p>Any thoughts appreciated!</p>
  
  <p>JSX:</p>
  
  <pre><code>import React from 'react'
  
  export const PageNotFound = ({heading, content, wrapperCSS, headingCSS, contentCSS}) =&gt; (
  &lt;div className={ wrapperCSS }&gt;
    &lt;div className={ contentCSS }&gt;
      { content }
    &lt;/div&gt;
    &lt;h1 className={ headingCSS }&gt;{ heading }&lt;/h1&gt;
  &lt;/div&gt;
  )
  
  PageNotFound.propTypes = {
      heading: React.PropTypes.string,
      content: React.PropTypes.string,
      wrapperCSS: React.PropTypes.string,
      headingCSS: React.PropTypes.string,
      contentCSS: React.PropTypes.string
  };
  
  PageNotFound.defaultProps = {
      heading: '404',
      content: 'Page Not Found',
      wrapperCSS: 'wrapper',
      headingCSS: 'heading',
      contentCSS: 'content'
  };
  
  export default PageNotFound
  </code></pre>
  
  <p>Spec:</p>
  
  <pre><code>import React from 'react'
  import { expect } from 'chai'
  import { shallow, mount } from 'enzyme'
  
  import PageNotFound from './PageNotFound'
  
  describe('&lt;PageNotFound/&gt;', function() {
  
  let wrapper;
  
  beforeEach(() =&gt; {
      wrapper = mount(&lt;PageNotFound contentCSS="mycontent" headingCSS="myheader" content="Message" heading="My Title" /&gt;);
  })
  
  it('Uses heading prop', () =&gt; {
      expect(wrapper.find('h1').text()).to.eq('My Title')
  });
  
  it('Uses headingCSS prop', () =&gt; {
      console.log(wrapper.html());
      expect(wrapper.find('h1.myheader').length).to.eq(1)
  });
  
  it('Uses content prop', () =&gt; {
      expect(wrapper.find('div.mycontent').text()).to.eq('Message')
  });
  
  
  });
  </code></pre>
  
  <p>Test Results:  </p>
  
  <p>Notice the debug log which shows the h1 with class myheader, but the test fails with zero elements found for h1.myheader</p>
  
  <pre><code>&lt;PageNotFound/&gt;
      ✓ Uses heading prop
  LOG LOG: '&lt;div class="_2t--u"&gt;&lt;h1 class="myheader"&gt;My Title&lt;/h1&gt;&lt;div class="mycontent"&gt;Message&lt;/div&gt;&lt;/div&gt;'
      ✗ Uses headingCSS prop
      expected 0 to equal 1
      r@tests.webpack.js:11:24087
      assert@tests.webpack.js:14:52974
      a@tests.webpack.js:14:55858
      tests.webpack.js:15:17123
      tests.webpack.js:14:10442
  
      ✓ Uses content prop
  </code></pre>