title: how to test react components with recompose hocs
body: <p>recently started using recompose (<a href="https://github.com/acdlite/recompose" rel="nofollow noreferrer">https://github.com/acdlite/recompose</a>)</p>
  
  <p>I wonder how should I approach unit testing components that are wrapped with some of hocs recompose provide? I love how entire class component can be replaced with functional approach but it totally not true in terms of unit tests.</p>
  
  <p>For example with given list component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const ListItem = toClass(pure(({ text }) =&gt; &lt;li&gt;{text}&lt;/li&gt;));
  const renderItems = R.map(t =&gt; &lt;ListItem key={t} text={t} /&gt;);
  
  export const ListComponent = toClass(({ todos, name, updateName, addTodo }) =&gt;
    &lt;div&gt;
      &lt;input onChange={updateName} value={name} /&gt;
      &lt;button onClick={() =&gt; addTodo(name)}&gt;add todo&lt;/button&gt;
      &lt;ul&gt;
        {renderItems(todos)}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
  
  ...
  
  const List = compose(
    withReducer("state", "dispatch", listReducer, props =&gt; ({
      ...initialState,
      ...props
    })),
    withHandlers({
      updateName: ({ dispatch }) =&gt; e =&gt;
        dispatch({ type: "UPDATE_NAME", payload: e.target.value }),
      addTodo: ({ dispatch, name }) =&gt; name =&gt;
        dispatch({ type: "ADD_TODO", payload: name })
    }),
    flattenProp("state")
  )(ListComponent);
  
  export default List;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I test children length with given props? I've tried something like this but it's not working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>it("renders todos list", () =&gt; {
      const component = shallow(&lt;List todos={["todo1", "todo2", "todo3"]} /&gt;);
      expect(component.instance().children).toHaveLength(3);
    });</code></pre>
  </div>
  </div>
  </p>