title: Jest throwing render error when loading functional child component
body: <p>I am getting <code>Error: Uncaught [Error: Child(...): Nothing was returned from render</code> when running a test file for the Parent component.</p>
  <p>These are the relevant files</p>
  <p><strong>/components/Page/Children/Child.js</strong></p>
  <pre><code>import React from &quot;react&quot;
  
  export default function Child() {
    return &lt;div&gt;abc&lt;/div&gt;
  }
  </code></pre>
  <p><strong>/components/Page/Children/index.js</strong></p>
  <p><code>export { default } from &quot;./Child&quot;</code></p>
  <p><strong>/components/Page/Parent.js</strong></p>
  <pre><code>import React from &quot;react&quot;
  import Child from &quot;./Children&quot;
  
  export default class Parent extends React.Component {
    constructor(props) {
      super(props)
    }
  
    render() {
      return &lt;Child /&gt;
    }
  }
  </code></pre>
  <p><strong>/components/Page/_<em>tests_</em>/Parent.spec.js</strong></p>
  <pre><code>import Parent from &quot;../Parent&quot;
  
  jest.mock(&quot;../Children&quot;)
  
  describe(&quot;&lt;Parent/&gt;&quot;, () =&gt; {
    let wrapper
    let props = ...
  
    describe(&quot;render&quot;, () =&gt; {
      it(&quot;renders&quot;, () =&gt; {
         wrapper = mount(&lt;Parent props={props} /&gt;)
         expect(wrapper).toMatchSnapshot()
      })
    })
  </code></pre>
  <p>changing the Child.js file to a react class component (as updated below) resolves the issue but I do not understand why that would be.</p>
  <p><strong>/components/Page/Children/Child.js</strong></p>
  <pre><code>import React from &quot;react&quot;
  
  export default class Child extends React.Component {
    render() {
      return &lt;div&gt;abc&lt;/div&gt;
    }
  }
  </code></pre>