title: Using Jest to mock a React component with props
body: <p>I have a React component which contains some other components that depend on access to a Redux store etc., which cause issues when doing a full Enzyme mount. Let's say a structure like this:
  </p>
  
  <pre class="lang-js prettyprint-override"><code>import ComponentToMock from './ComponentToMock';
  
  &lt;ComponentToTest&gt;
    ...some stuff
    &lt;ComponentToMock testProp="This throws a warning" /&gt;
  &lt;/ComponentToTest&gt;
  </code></pre>
  
  <p>I want to use Jest's <code>.mock()</code> method to mock out the sub-component, so that it is not a concern for the test.</p>
  
  <p>I'm aware that I can mock out a straight component with something like:</p>
  
  <p><code>jest.mock('./ComponentToMock', () =&gt; 'ComponentToMock');</code></p>
  
  <p>However, as this component would normally receive props, React gets upset, giving a warning about unknown props (in this case, <code>testProp</code>) being passed to <code>&lt;ComponentToMock /&gt;</code>.</p>
  
  <p>I've tried to return a function instead, however you can't return JSX (from what I could tell) in a Jest mock, due to it being hoisted. It throws an error in this case.</p>
  
  <p>So my question is how can I either</p>
  
  <p>a) get <code>ComponentToMock</code> to ignore props passed to it, or</p>
  
  <p>b) return a React component that can be used to mock the child component that I'm not worried about testing.</p>
  
  <p>Or... is there a better way?</p>