title: Mocking Redux store when testing React components?
body: <p>I'm using React and Redux. I have a component which loads <code>ChildComponent</code> and depending on Redux's state will also load <code>MainComponent</code></p>
  
  <pre><code>    const ChooseIndex = ({ appInitMount }) =&gt; {
        return (
          &lt;&gt;
            &lt;ChildComponent /&gt;
            {!appInitMount &amp;&amp; &lt;MainComponent /&gt;}
          &lt;/&gt;
        );
      };
  
  
      const mapStateToProps = ({ main }) =&gt; {
        return {
          appInitMount: main.appInitMount
        };
      };
  
      export default connect(
        mapStateToProps,
        mapDispatchToProps
      )(ChooseIndex);
  </code></pre>
  
  <p>I'm trying to write a test to check that <code>ChildComponent</code> is loaded: </p>
  
  <pre><code>    import React from "react";
      import { render } from "react-testing-library";
      import ChooseIndex from "../choose-index";
  
      test("ChooseIndex should call ChildComponent", () =&gt; {
        const wrapper = render(
          &lt;ChooseIndex /&gt;
        );
      });
  </code></pre>
  
  <p>I get this error: </p>
  
  <blockquote>
    <p>Error: Uncaught [Invariant Violation: Could not find "store" in either
    the context or props of "Connect(ChooseIndex)". Either wrap the root
    component in a , or explicitly pass "store" as a prop to
    "Connect(ChooseIndex)".]</p>
  </blockquote>
  
  <p>Should I mock Redux by passing an object literal to <code>ChooseIndex</code>? Or should I create a Redux store (as my real application does) for every test? </p>