title: Using Mocha to test higher order components in React
body: <p>I am using a <a href="http://www.tutorialspoint.com/reactjs/reactjs_higher_order_components.htm" rel="nofollow">HOC</a> in a React component that looks like:</p>
  
  <pre><code>import React from 'react';
  import Wrapper from 'wrapper';
  class Component extends React.Component {
    render () {
      return (
        &lt;div className='component' /&gt;
      )
    };
  }
  export default Wrapper(Component)
  </code></pre>
  
  <p>When testing Component using Mocha I am attempting to look for a class name that should be contained within Component. Like so:</p>
  
  <pre><code>describe('Component', function () {
    it('can be mounted with the required class', function () {
      const component = shallow(
        &lt;Component /&gt;
      );
      expect(component).to.have.className('component');
    });
  });
  </code></pre>
  
  <p>The problem is that Mocha doesn't know to look within the wrapper for the Component and attempts to find it in the HOC. Which of course it will not.</p>
  
  <p>The error I am receiving is:</p>
  
  <pre><code>AssertionError: expected &lt;Wrapper(Component) /&gt; to have a 'component' class, but it has undefined
       HTML:
  
       &lt;div class="component"&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>How do I tell Mocha to look within the HOC for the correct location of the class name instead of the HOC itself?</p>