title: Element type is invalid - Export default and default import
body: <p>I'm writing tests for my components, the components work fine in the application. Importing and consuming them works great but getting them to work with <code>react-test-renderer</code> has not been as great. For example, I have a social component that reads config and renders out links.</p>
  <p>./components/Social/social.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import PropTypes from 'prop-types'
  
  import config from '../../../content/meta/config'
  
  import GithubIcon from '!svg-react-loader!../../images/svg-icons/github.svg?name=GithubIcon'
  import LinkedInIcon from '!svg-react-loader!../../images/svg-icons/linkedin.svg?name=LinkedInIcon'
  import TwitterIcon from '!svg-react-loader!../../images/svg-icons/twitter.svg?name=TwitterIcon'
  import InstagramIcon from '!svg-react-loader!../../images/svg-icons/instagram.svg?name=InstagramIcon'
  import DevIcon from '!svg-react-loader!../../images/svg-icons/dev.svg?name=DevIcon'
  
  const Social = props =&gt; {
    const { theme } = props
    const items = config.authorSocialLinks
    const icons = {
      twitter: TwitterIcon,
      github: GithubIcon,
      linkedin: LinkedInIcon,
      instagram: InstagramIcon,
      dev: DevIcon,
    }
  
    return (
      &lt;React.Fragment&gt;
        &lt;div className=&quot;social&quot;&gt;
          {items.map(item =&gt; {
            const Icon = icons[item.name]
            return (
              &lt;a
                href={item.url}
                key={item.name}
                className=&quot;socialLink&quot;
                target=&quot;_blank&quot;
                rel=&quot;noopener noreferrer&quot;
                title={item.name}
              &gt;
                &lt;Icon className=&quot;svg&quot; /&gt;
              &lt;/a&gt;
            )
          })}
        &lt;/div&gt;
  
        {/* --- STYLES --- */}
        &lt;style jsx global&gt;
          {`
            @media screen and (max-width: 450px) {
              .social {
                width: 95%;
              }
            }
            @media screen and (min-width: 450px) {
              .social {
                width: 40%;
              }
            }
            .social {
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 0 auto;
              padding: 20px;
  
              :global(svg) {
                width: 30px;
                height: 30px;
                transition: all 0.5s;
              }
  
              &amp;:hover :global(svg) {
                fill: ${theme.color.special.attention};
              }
            }
  
            .svg path {
              fill: ${theme.color.brand.primary};
            }
  
            .socialLink {
              margin: 0 auto;
              display: inline-block;
              padding: 1px;
              text-align: center;
            }
          `}
        &lt;/style&gt;
      &lt;/React.Fragment&gt;
    )
  }
  
  Social.propTypes = {
    theme: PropTypes.object.isRequired,
  }
  
  export default Social
  </code></pre>
  <p>./components/Social/index.js</p>
  <pre class="lang-js prettyprint-override"><code>export { default } from './Social'
  </code></pre>
  <p>In my test I'm importing the component and rendering to do snapshot testing. Test:</p>
  <p>./components/<strong>tests</strong>/social.spec.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import { create } from 'react-test-renderer'
  import Social from '../Social'
  const theme = require('../../theme/theme.json')
  
  describe('Social Component', () =&gt; {
    it('renders correctly', () =&gt; {
      const tree = create(&lt;Social theme={theme} /&gt;).toJSON()
      expect(tree).toMatchSnapshot()
    })
  })
  </code></pre>
  <p>I am getting the error only in my test and not in the app.</p>
  <blockquote>
  <p>Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.</p>
  <p>Check the render method of <code>Social</code>.</p>
  </blockquote>
  <p>I've tried many little tweaks to no avail.</p>