title: How to test decorated React component with shallow rendering
body: <p>I am following this tutorial: <a href="http://reactkungfu.com/2015/07/approaches-to-testing-react-components-an-overview/" rel="noreferrer">http://reactkungfu.com/2015/07/approaches-to-testing-react-components-an-overview/</a></p>
  
  <p>Trying to learn how "shallow rendering" works.</p>
  
  <p>I have a higher order component:</p>
  
  <pre><code>import React from 'react';
  
  function withMUI(ComposedComponent) {
    return class withMUI {
      render() {
        return &lt;ComposedComponent {...this.props}/&gt;;
      }
    };
  }
  </code></pre>
  
  <p>and a component:</p>
  
  <pre><code>@withMUI
  class PlayerProfile extends React.Component {
    render() {
      const { name, avatar } = this.props;
      return (
        &lt;div className="player-profile"&gt;
          &lt;div className='profile-name'&gt;{name}&lt;/div&gt;
          &lt;div&gt;
            &lt;Avatar src={avatar}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>and a test:</p>
  
  <pre><code>describe('PlayerProfile component - testing with shallow rendering', () =&gt; {
    beforeEach(function() {
     let {TestUtils} = React.addons;
  
      this.TestUtils = TestUtils;
  
      this.renderer = TestUtils.createRenderer();
      this.renderer.render(&lt;PlayerProfile name='user'
                                              avatar='avatar'/&gt;);
    });
  
    it('renders an Avatar', function() {
      let result = this.renderer.getRenderOutput();
      console.log(result);
      expect(result.type).to.equal(PlayerProfile);
    });
  });
  </code></pre>
  
  <p>The <code>result</code> variable holds <code>this.renderer.getRenderOutput()</code></p>
  
  <p>In the tutorial the <code>result.type</code> is tested like:</p>
  
  <p><code>expect(result.type).toEqual('div');</code></p>
  
  <p>in my case, if I log the <code>result</code> it is:</p>
  
  <p><code>LOG: Object{type: function PlayerProfile() {..}, .. }</code></p>
  
  <p>so I changed my test like:</p>
  
  <p><code>expect(result.type).toEqual(PlayerProfile)</code></p>
  
  <p>now it gives me this error:</p>
  
  <p><code>Assertion Error: expected [Function: PlayerProfile] to equal [Function: withMUI]</code></p>
  
  <p>So <code>PlayerProfile</code>'s type is the higher order function <code>withMUI</code>.</p>
  
  <p><em><code>PlayerProfile</code> decorated with <code>withMUI</code>, using shallow rendering, only the <code>PlayerProfile</code> component is rendered and not it's children. So shallow rendering wouldn't work with decorated components I assume.</em></p>
  
  <p>My question is:</p>
  
  <p>Why in the tutorial <code>result.type</code> is expected to be a div, but in my case isn't.</p>
  
  <p>How can I test a React component decorated with higher order component using shallow rendering?</p>