Jest gives `Cannot find module` when importing components with absolute paths

Question

Receiving the following error when running Jest

Cannot find module 'src/views/app' from 'index.jsx'

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
  at Object.<anonymous> (src/index.jsx:4:12)

index.jsx

import AppContainer from 'src/views/app';

package.json

  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleDirectories": [
        "node_modules",
        "src"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node",
      "mjs"
    ]
  },

My tests that run files that only contain relative paths in the tree run correctly.

To Clarify, I'm looking for how to configure Jest to not fail on absolute paths.

I need to know how to run absolute paths so I don't have to back step multiple directories on imports or update as many files if I move files — Seth McClaine
– Seth McClaine, Commented Jun 14, 2018 at 18:03
Important to mention that here the jest config is in the package.json. But I could also be on a jest.config.json or other file. — oskrgg
– oskrgg, Commented Jun 23, 2023 at 20:12

Sachin Joseph · Accepted Answer · 2020-02-26 21:11:56Z

123

I think you're looking for: roots or modulePaths and moduleDirectories

You can add both relative and absolute paths.

I would make sure to include <rootDir> in the roots array, <rootDir> in the modulePaths array, and node_modules in the moduleDirectories array, unless you've got a good reason to exclude them.

"jest": {
  "roots": [
    "<rootDir>",
    "/home/some/path/"
  ],
  "modulePaths": [
    "<rootDir>",
    "/home/some/other/path"
  ],
  "moduleDirectories": [
    "node_modules"
  ],
}

edited Feb 26, 2020 at 21:11

Sachin Joseph

19.8k4 gold badges49 silver badges66 bronze badges

answered Jun 14, 2018 at 18:27

twils0

2,6352 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Emeka Elo Over a year ago

This helped me solved my issue in Angular. My error was Cannot find module 'src/app/core/services/seo.service' from 'src/app/blog/blog-list/blog-list.component.ts' and it happened after importing routerTestingModule in my spec file which was to solve an error of NG0304: 'router-outlet' is not a known element: In my jest.config.js ` module.exports = { preset: "jest-preset-angular", setupFilesAfterEnv: ["<rootDir>/setup-jest.ts"], globalSetup: "jest-preset-angular/global-setup", modulePaths: ["<rootDir>"], // <-- adding this solved it };`

totymedli Over a year ago

"modulePaths": ["<rootDir>/src/"] was what I needed.

c_froehlich Over a year ago

"modulePaths": [ "<rootDir>/../" ] was it in may case :=)

George Mylonas Over a year ago

This doesn't work with Create React App. We must eject first to run this :/

Nikhil Wagh Over a year ago

moduleDirectories can be omitted as the default for it is already ["node_modules"]

|

Lee Goddard · Accepted Answer · 2025-04-28 09:26:25Z

78

In package.json you have the below lines of Jest configuration:

"moduleDirectories": [
    "node_modules",
    "src"
]

These says that each module you import will be searched for first in node_modules, then in src.

Since the code is already looking in the src/, you should use:

import AppContainer from 'views/app';

Please note that this path is absolute to the src directory, you do not have to navigate to locate it as relative path.

Or you can configure your root directory in moduleDirectories inside your Jest configuration (in your case, within package.json) so that all your components could be easily found.

edited Apr 28 at 9:26

Lee Goddard

11.3k5 gold badges53 silver badges71 bronze badges

answered Jun 14, 2018 at 18:18

Hriday Modi

2,08916 silver badges22 bronze badges

1 Comment

giovannipds Over a year ago

In my case, moduleNameMapper was the way to go, considering we had @ pointing to some specific root directories.

Waclock · Accepted Answer · 2021-02-09 00:17:15Z

25

Adding

"moduleDirectories": [
    "node_modules",
    "src"
]

should work if you have Jest's config in your package.json file.

If you have a jest.config.js file, you should add it there, otherwise package.json will be overriden (and ignored) by this config file. So in your jest.config.js file:

module.exports = {
// ... lots of props
  moduleDirectories: ["node_modules", "src"],
// ...
}

edited Feb 9, 2021 at 0:17

answered Nov 5, 2020 at 17:37

Waclock

1,73620 silver badges38 bronze badges

Comments

usersina · Accepted Answer · 2022-03-18 09:29:50Z

10

That's because jest doesn't recognize relative imports like src/views/app

Add a rootDir and a modulePaths in package.json

"name": "my-app",
...
"jest": {
    ...
    "rootDir": "./",
    "modulePaths": [
      "<rootDir>"
    ],
    ...
  }
}

answered Mar 18, 2022 at 9:29

usersina

1,9451 gold badge24 silver badges43 bronze badges

1 Comment

pravin Over a year ago

The problem I was facing was the imports inside another imported file. Using it for nestJs. The actual test files are in a folder called tests and the actual code is in src. The above with slight modification seems to be working for me "modulePaths": [ "<rootDir>/../" ],

Mathe · Accepted Answer · 2023-05-11 09:44:08Z

9

In my case, I was running integration tests and all tests were in the same file with the path src/int-test.spec.ts in order to read paths I had to write:

Solution 1

"jest": {
    ...,
    "moduleNameMapper": {
      "src/(.*)": "<rootDir>/$1"
    }
  }

Another way of doing this is to create jest.config.js file, The file will be discovered automatically, if it is named jest.config.js|ts|mjs|cjs|json. And put this into it:

Solution 2

const path = require('path');

module.exports = {
  moduleFileExtensions: ['js', 'json', 'ts'],
  roots: ['src'],
  testRegex: '.*\\.spec\\.ts$',
  transform: {
    '^.+\\.(t|j)s$': 'ts-jest',
  },
  collectCoverageFrom: ['**/*.(t|j)s'],
  coverageDirectory: '../coverage',
  testEnvironment: 'node',
  moduleDirectories: ['node_modules', 'src', __dirname],
};

edited May 11, 2023 at 9:44

answered Dec 20, 2022 at 12:01

Mathe

3262 silver badges3 bronze badges

1 Comment

Lerk Over a year ago

Additionally, if you're experiencing this issue with prefixed imports (like parcel likes to use), you can change the mapper to: "prefix:(.*)": "$1" and then mock the path without the prefix if needed.

suranga upul · Accepted Answer · 2022-08-19 11:58:14Z

5

Make sure you have run npm i or npm install after update the package.json. My issue was that :0

answered Aug 19, 2022 at 11:58

suranga upul

2595 silver badges6 bronze badges

Comments

Osv · Accepted Answer · 2021-07-17 03:32:20Z

For those who are building something from scratch with Webpack and Babbel. Try the following steps:

Delete the node_modules folder and install again. (This was something that solved my issue).
Here is a link with the necessary documentation to set up Webpack which in some cases will not be necessary. Jest Docs Webpack
Here is a link to the docs that explains how to set up Jest with React (Without using Create-React-App). Jest React Docs

4. Here is an example with a simple setup with Jest. You can set this up in package.json or the Jest configuration file.

Disclaimer: This does not answer the OP question. But most people will end up here for the keywords used for this issue.

  "jest": {
"moduleFileExtensions": ["js", "jsx"],
"moduleDirectories": ["node_modules"],
"moduleNameMapper": {
  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
  "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}

},

Zoidbergseasharp · Accepted Answer · 2021-11-12 08:32:50Z

3

One of the modules I wanted to use has a .cjs extension. Adding .cjs to moduleFileExtensions in jest.config.js fixed this problem for me.

My jest.config.js as example:

module.exports = {
    moduleNameMapper: {
        // see: https://github.com/kulshekhar/ts-jest/issues/414#issuecomment-517944368
        "^@/(.*)$": "<rootDir>/src/$1",
    },
    preset: "ts-jest/presets/default-esm",
    globals: {
        "ts-jest": {
            useESM: true,
        },
    },
    testEnvironment: 'jsdom',
    transform: {
        '^.+\\.vue$': 'vue3-jest',
    },
    moduleFileExtensions: ['json', 'js', 'jsx', 'ts', 'tsx', 'vue', "cjs"],
    moduleDirectories: ["node_modules"],
};

answered Nov 12, 2021 at 8:32

Zoidbergseasharp

4,6681 gold badge19 silver badges22 bronze badges

Comments

VyTor BrB · Accepted Answer · 2022-06-21 16:06:48Z

3

Just add "modulePaths" to your package.json

"jest": {
    ...
    "modulePaths": [
      "<rootDir>"
    ],
    ...
  }
}

answered Jun 21, 2022 at 16:06

VyTor BrB

1218 bronze badges

Comments

Anderson Paiva · Accepted Answer · 2023-10-06 18:12:01Z

3

Try to add this to jest config

"modulePaths": [
  "<rootDir>"
]

answered Oct 6, 2023 at 18:12

Anderson Paiva

99810 silver badges14 bronze badges

Comments

Ankur Marwaha · Accepted Answer · 2021-03-02 09:45:55Z

2

Adding __esModule:true fixed this issue for me.

jest.mock('module',()=>({
  __esModule: true,                    // this makes it work
  default: jest.fn()
}));

Hope this helps somebody. Although this is not very specific to the question.

answered Mar 2, 2021 at 9:45

Ankur Marwaha

1,9252 gold badges22 silver badges35 bronze badges

Comments

Mike Rippon · Accepted Answer · 2022-02-10 17:50:30Z

1

This can also be caused by absolute imports present in the globalSetup file (or any files it references).

It seems like moduleNameMappers do not get applied to globalSetup files. I fixed this by just switching to relative imports for those specific files.

answered Feb 10, 2022 at 17:50

Mike Rippon

6047 silver badges15 bronze badges

Comments

r31sr4r · Accepted Answer · 2022-03-28 22:50:33Z

1

This Workaround:

Using "moduleNameMapper" in your jest configuration will make test-resolve work as expected:

"jest": {
  "moduleNameMapper": {
    "#(.*)": "<rootDir>/node_modules/$1"
  }
}

https://gist.github.com/lydell/d62ce96c95c035811133a5396195da14

answered Mar 28, 2022 at 22:50

r31sr4r

3751 gold badge2 silver badges13 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Shashwat · Accepted Answer · 2024-06-24 06:48:49Z

1

I also faced the same issue using Angular@15 and Jest@29. Following are the two fixes that worked for me.

Converting absolute path to relative path (not a scalable solution if you have a large codebase)
Absolute path - import SharedService from 'src/app/services/shared/shared.service';
Relative path - import SharedService from '../../services/shared/shared.service';
Add the following in your jest configuration (jest.config.ts)

module.exports = {
 ...,
 ...,
 moduleDirectories: ['node_modules', '<rootDir>'],
}

edited Jun 24, 2024 at 6:48

answered Jun 24, 2024 at 6:47

Shashwat

1111 silver badge5 bronze badges

Comments

SeanMC · Accepted Answer · 2022-09-28 21:04:58Z

0

I had jest-expo installed, but not jest. Probably related that I'm prebuild-ejected from Expo. I had to run yarn add jest-expo jest to install jest, and updated jest-expo. Now my tests run.

Depending on your setup it might be, npm i jest-expo jest or expo install jest-expo jest. ... Got the idea from their docs https://docs.expo.dev/guides/testing-with-jest/

answered Sep 28, 2022 at 21:04

SeanMC

2,4352 gold badges29 silver badges37 bronze badges

Comments

Dawid Dahl · Accepted Answer · 2023-08-01 09:20:33Z

This solved it for me.

Here is my jest-e2e.json file:

{
    "moduleFileExtensions": ["js", "json", "ts"],
    "rootDir": "..",
    "globalSetup": "<rootDir>/src/integration-test/setup.ts",
    "globalTeardown": "<rootDir>/src/integration-test/teardown.ts",
    "testEnvironment": "node",
    "testRegex": ".e2e-spec.ts$",
    "transform": {
        "^.+\\.(t|j)s$": "ts-jest"
    },
    "moduleDirectories": ["<rootDir>", "node_modules"],
    "moduleNameMapper": {
        "^src/(.*)$": "<rootDir>/src/$1"
    },
    "testPathIgnorePatterns": [".*\\.e2e\\.ts$"],
    "collectCoverageFrom": ["src/**/*.ts", "!src/private/**/*.resolver.ts"],
    "coveragePathIgnorePatterns": [
        ".*\\.module\\.ts$",
        ".*\\.entity\\.ts$",
        ".*\\.dto\\.ts$",
        ".*\\.interface\\.ts$",
        ".*\\.input\\.ts$",
        ".*\\.config\\.(t|j)s$",
        ".*\\.js$",
        "/dist/",
        "/coverage/",
        "/node_modules/"
    ],
    "coverageDirectory": "./coverage",
    "transformIgnorePatterns": ["node_modules/(?!(node-fetch)/)"]
}

You can see I call "setup.ts" in there. Then I added "tsconfig-paths/register" like this in my setup.ts file:

require("tsconfig-paths/register") <---- ADDED THIS

import { integrationTestEnvSetup } from "./env-setup"
import { integrationTestSetupStuff } from "./setup-stuff"

/* Code run prior to integration test from ./jest-e2e.json */

const integrationTestSetup = async () => {
    await integrationTestEnvSetup()
    await integrationTestSetupStuff()
}

export default integrationTestSetup

Make sure you have the tsconfig-paths package installed for this as well.

The require("tsconfig-paths/register") line is used to import the tsconfig-paths package, which is a utility that allows Node.js to understand TypeScript's paths and baseUrl options directly. This is often used in conjunction with a tool like ts-node for running TypeScript code directly in Node.js without a separate compilation step.

Hope that can help anyone else! I was so happy when I realized that this worked, after hours of hair-pulling.

Collectives™ on Stack Overflow

Jest gives `Cannot find module` when importing components with absolute paths

16 Answers 16

6 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

6 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related