title: Jest/Enzyme and Styled Components Cannot find module
body: <p>I am getting the following error when I run</p>
  <pre><code>npm run test
  
  src/components/documentEditor/levels/2_page/page.test.js
    ● Test suite failed to run
  
      Cannot find module 'react' from 'styled-components.cjs.js'
  
      However, Jest was able to find:
          './page.js'
          './page.test.js'
  
      You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].
  
      See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string
  </code></pre>
  <p>The   {Cannot find module 'react' from 'styled-components.cjs.js'} error I think refers to the import in the 'Page' component that is being tested</p>
  <p>the 'Page' component runs perfectly if I do not run any testing and the styledComponents is used and works.</p>
  <p>The header of the 'Page' component looks like this (not the full component just the first few lines)</p>
  <pre><code>import React from 'react';
  import styled from 'styled-components';
  import { Droppable, Draggable } from 'react-beautiful-dnd';
  import { filterArrayByChildrenIds } from '../../functions/supportingFunctions/generic';
  import ModifyPage from './modifyPage';
  import Paragraph from '../3_paragraph/paragraph';
  
  const Container = styled.div``;
  const Title = styled.div``;
  const VerticalList = styled.div`
  </code></pre>
  <p>The Jest setup in package.JSON is this</p>
  <pre><code> {
    &quot;name&quot;: &quot;client&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;axios&quot;: &quot;^0.19.0&quot;,
      &quot;enzyme-adapter-react-16&quot;: &quot;^1.15.3&quot;,
      &quot;react&quot;: &quot;^16.9.0&quot;,
      &quot;react-dom&quot;: &quot;^16.9.0&quot;,
      &quot;react-router-dom&quot;: &quot;^5.0.1&quot;,
      &quot;react-scripts&quot;: &quot;^3.4.3&quot;,
      &quot;react-transition-group&quot;: &quot;^4.3.0&quot;,
      &quot;uuid&quot;: &quot;^3.3.3&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;jest&quot;: {
      &quot;collectCoverageFrom&quot;: [
        &quot;src/components/documentEditor/*.js&quot;,
        &quot;!&lt;rootDir&gt;/node_modules/&quot;,
        &quot;!&lt;rootDir&gt;/src/index.js&quot;,
        &quot;!&lt;rootDir&gt;/src/registerServiceWorker.js&quot;
      ]
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;proxy&quot;: &quot;http://localhost:5000&quot;
  }
  </code></pre>
  <p><strong>WHAT I INVESTIGATED</strong><br></p>
  <ol>
  <li>Similar issues seem to point to the import statement being too general. I found this post
  <a href="https://stackoverflow.com/questions/37307799/react-jest-cannot-find-module-from-test-file">React &amp; Jest: Cannot find module from test file</a>. However I could not figure out if I was specifically doing something wrong from the post.
  <br><br></li>
  <li>I also thought it might might be some incompatibility between jest or enzyme and the styled library but could not find anything on it.</li>
  <li>I found this on stack overflow but doesn't seem to be the same problem <a href="https://stackoverflow.com/questions/59503501/testing-component-created-using-styled-component-with-jest-and-enzyme">Testing component created using styled component with jest and enzyme</a>.</li>
  <li>I removed import styled from 'styled-components' from page.js and all references to styled components. After completing that I got a new error</li>
  </ol>
  <pre><code>  src/components/documentEditor/levels/2_page/page.test.js
    ● Test suite failed to run
  
      Cannot find module 'react' from 'react-beautiful-dnd.cjs.js'
  
      However, Jest was able to find:
          './page.js'
          './page.test.js'
  </code></pre>