title: Unit testing connected higher-order components in React/Enzyme
body: <p>In normal <code>connect</code>ed React components, in order to make unit testing easier, I've seen the pattern of <a href="https://hackernoon.com/unit-testing-redux-connected-components-692fa3c4441c" rel="nofollow noreferrer"><code>export</code>ing the base component, while <code>export default</code>ing the connected component</a>. It works well for simple tests that handle the actual functionality of the component without getting cluttered with redux stores and router mocking.</p>
  
  <p>I'm looking for an analog for higher-order components. For instance, given a trivial higher-order component:</p>
  
  
  
  <pre><code>export default function exampleHoc(Wrapped) {
    const ExampleHoc = props =&gt; (
      &lt;Wrapped {...props.reduxStore} hoc={true} /&gt;
    );
  
    return connect(
      state =&gt; ({
        reduxStore: state.example.reduxStore,
      }))(ExampleHoc);
  }
  </code></pre>
  
  <p>I'd like to verify that <code>props.hoc === true</code> in a unit test, without having to wire up the other higher-order components that <code>&lt;ExampleHoc&gt;</code> strings along.</p>
  
  <p>My best design is passing along a flag:</p>
  
  
  
  <pre><code>export default function exampleHoc(Wrapped, exportUnconnectedForTest) {
    const ExampleHoc = props =&gt; (
      &lt;Wrapped {...props.reduxStore} hoc={true} /&gt;
    );
  
    if (exportUnconnectedForTest) {
      return ExampleHoc;
    }
  
    return connect(
      state =&gt; ({
        reduxStore: state.example.reduxStore,
      }))(ExampleHoc);
  }
  </code></pre>
  
  <p>This makes it easy to test</p>
  
  
  
  <pre><code>const DummyComponent = () =&gt; &lt;div /&gt;;
  const Sut = exampleHoc(DummyComponent, true);
  
  ...
  
  test('props value should be passed', () =&gt; {
    const sut = shallow(&lt;Sut /&gt;);
    const childProps = sut.find(DummyComponent).props();
    expect(sut.childProps.hoc).to.equal(true);
  });
  </code></pre>
  
  <p>while still happily passing along the wrapped output to any regular callers of the method.</p>
  
  <p>It works, but it seems clunky to me. Is there a better/established pattern for delivering the unwrapped interior of a higher-order component?</p>