title: Jest, Enzyme and Styled Component not working with Warning: React.createElement
body: <p>I have created a styled components in a sperate file with the same name and <code>.css.jsx</code> for example <code>Abc.jsx</code> have <code>Abc.css.jsx</code> and it's imported to the <code>Abc.jsx</code> to use. But when I try to test <code>Abc.jsx</code> I get the below error from the Enzyme mount,</p>
  <pre><code>Warning: React.createElement: 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.
  </code></pre>
  <p>Seems like React can't locate the styles written in my <code>Abc.css.jsx</code>. Does anyone know the reason for this and how to fix this?</p>
  <p><strong>Abc.jsx</strong></p>
  <pre><code>import * as Styled from './Abc.css';
  
  function Abc() {
    return (&lt;Styled.Title&gt;ABC&lt;/ Styled.Title&gt;);
  }
  
  export default Abc
  </code></pre>
  <p><strong>Abc.css.jsx</strong></p>
  <pre><code>import styled from 'styled-components';
  
  export const Title = styled.div`
  `;
  </code></pre>
  <p><strong>Abc.test.js</strong></p>
  <pre><code>import Abc from '../../../components/Abc';
  import { mount } from 'enzyme';
  
  describe(&quot;My Abc tests&quot;, () =&gt; {
  
      let wrapper;
  
      beforeAll(() =&gt; {
          wrapper = mount(&lt;Abc /&gt;);
      })
  
      test(&quot;check api call&quot;, async () =&gt; {
          
  
      })
  
  });
  </code></pre>
  <p><strong>jest.config</strong></p>
  <pre><code>module.exports = {
      testPathIgnorePatterns: [&quot;&lt;rootDir&gt;/.next/&quot;, &quot;&lt;rootDir&gt;/node_modules/&quot;],
      setupFilesAfterEnv: [&quot;&lt;rootDir&gt;/setupTests.js&quot;],
      moduleNameMapper: {
          &quot;\\.(css|less|scss|sass)$&quot;: &quot;identity-obj-proxy&quot; 
      },
      transform: {
          &quot;^.+\\.(js|jsx|ts|tsx)$&quot;: &quot;&lt;rootDir&gt;/node_modules/babel-jest&quot;,
          &quot;\\.(css|less|scss|sass)$&quot;: &quot;identity-obj-proxy&quot;
      }
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/97vKC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/97vKC.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/VFCXV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VFCXV.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/b2DgA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b2DgA.png" alt="Folder structure" /></a></p>
  <p><a href="https://i.stack.imgur.com/QTqml.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QTqml.png" alt="package.json" /></a></p>
  <p><a href="https://i.stack.imgur.com/BbrR5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BbrR5.png" alt="package.json" /></a></p>