Jest/Enzyme and Styled Components Cannot find module

Question

I am getting the following error when I run

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

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

the 'Page' component runs perfectly if I do not run any testing and the styledComponents is used and works.

The header of the 'Page' component looks like this (not the full component just the first few lines)

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`

The Jest setup in package.JSON is this

 {
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "enzyme-adapter-react-16": "^1.15.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.4.3",
    "react-transition-group": "^4.3.0",
    "uuid": "^3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/components/documentEditor/*.js",
      "!<rootDir>/node_modules/",
      "!<rootDir>/src/index.js",
      "!<rootDir>/src/registerServiceWorker.js"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5000"
}

WHAT I INVESTIGATED

Similar issues seem to point to the import statement being too general. I found this post React & Jest: Cannot find module from test file. However I could not figure out if I was specifically doing something wrong from the post.
I also thought it might might be some incompatibility between jest or enzyme and the styled library but could not find anything on it.
I found this on stack overflow but doesn't seem to be the same problem Testing component created using styled component with jest and enzyme.
I removed import styled from 'styled-components' from page.js and all references to styled components. After completing that I got a new error

  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'

Benny Benny · Accepted Answer · 2020-08-28T13:36:57

FIX I navigated to the client directory and installed react-beautiful and styled there (as they were installed but in the server directory and when I ran jset from the client directory they were not loaded).

WHY DID THIS WORK?
The app is node (server) and react (client) meaning there are two node module directories and two package.json files

When I run the app I usually run it from the server which runs the module "concurrently" and then runs the client.

react-beautiful and styled-components were installed into the node directory of the server - they then were loaded when I ran the app.

I was running Jest from the client directory meaning the server and node modules were not being loaded

Jest/Enzyme and Styled Components Cannot find module

1 Answers