Jest moduleNameMapper to find files: "resolver": undefined

Question

I have a text file (amongst others) in the component folder under the path: src/components/text

However, Jest does not find this file when the webpack alias import Text from "components/text"; is used.

I tried adding to package.json :

"jest": {
    "globals": {
      "NODE_ENV": "test"
    },
    "transform": {
      "\\.[jt]sx?$": "babel-jest"
    },
    "verbose": false,
    "rootDir": ".",
    "collectCoverageFrom": [
      "**/*.{js,jsx,ts,tsx}",
      "!**/*.d.ts"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "ts",
      "tsx"
    ],
    "moduleNameMapper": {
      "\\.(css|less|scss|sass|svg)$": "identity-obj-proxy",
      "^components/(.*)$": "<rootDir>/src/components/$1",
      "^assets/(.*)$": "<rootDir>/src/assets/$1",
      "^utils/(.*)$": "<rootDir>/src/utils/$1",
      "^styles/(.*)$": "<rootDir>/src/styles/$1"
      "/^locales\/(.*)$/": "<rootDir>/src/locales/$1",
    },
    "testMatch": [
      "**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "modulePathIgnorePatterns": [
      "./dist"
    ],
    "transformIgnorePatterns": [
      "/node_modules/(?!(@opt-ui|@equinor))"
    ],
    "coverageDirectory": "<rootDir>/tests/coverage/"
  }

But I'm getting the error:

Test suite failed to run

    Configuration error:
    
    Could not locate module components/text mapped as:
    /Users/olahalvorsen/cssu-dashboard-client/src/components$1.
    
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^components\/(.*)$/": "/Users/olahalvorsen/cssu-dashboard-client/src/components$1"
      },
      "resolver": undefined
    }

So, "^components/(.*)$": "<rootDir>/src/components/$1" in the moduleNameMapper solved the first issue above:)

But now I'm getting another error:

FAIL  src/pages/errorpage/tests/error.test.jsx
  ● Test suite failed to run

    Cannot find module 'locales' from 'src/utils/helpers/helpers.js'

    Require stack:
      src/utils/helpers/helpers.js
      src/components/text/index.jsx
      src/pages/errorpage/error.jsx
      src/pages/errorpage/tests/error.test.jsx

      29 | import { nb, enGB } from "date-fns/locale";
      30 | 
    > 31 | import translations from "locales";
         | ^
      32 | 
      33 | export const capitalize = string => {
      34 |   if (typeof string === "string") {

I updated the package.json above. The relative directory of locales is src/locales . Shouldn't this work:

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

I tried using: "/^locales\\/(.*)$/": "<rootDir>/src/locales/$1"

The solution was to use: "^locales(.*)$": "<rootDir>/src/locales/$1"

Answer 1

I have a text file (amongst others) in the component folder under the path: src/components/text

However, Jest does not find this file when the webpack alias import Text from "components/text"; is used.

I tried adding to package.json :

"jest": {
    "globals": {
      "NODE_ENV": "test"
    },
    "transform": {
      "\\.[jt]sx?$": "babel-jest"
    },
    "verbose": false,
    "rootDir": ".",
    "collectCoverageFrom": [
      "**/*.{js,jsx,ts,tsx}",
      "!**/*.d.ts"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "ts",
      "tsx"
    ],
    "moduleNameMapper": {
      "\\.(css|less|scss|sass|svg)$": "identity-obj-proxy",
      "^components/(.*)$": "<rootDir>/src/components/$1",
      "^assets/(.*)$": "<rootDir>/src/assets/$1",
      "^utils/(.*)$": "<rootDir>/src/utils/$1",
      "^styles/(.*)$": "<rootDir>/src/styles/$1"
      "/^locales\/(.*)$/": "<rootDir>/src/locales/$1",
    },
    "testMatch": [
      "**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "modulePathIgnorePatterns": [
      "./dist"
    ],
    "transformIgnorePatterns": [
      "/node_modules/(?!(@opt-ui|@equinor))"
    ],
    "coverageDirectory": "<rootDir>/tests/coverage/"
  }

But I'm getting the error:

Test suite failed to run

    Configuration error:
    
    Could not locate module components/text mapped as:
    /Users/olahalvorsen/cssu-dashboard-client/src/components$1.
    
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^components\/(.*)$/": "/Users/olahalvorsen/cssu-dashboard-client/src/components$1"
      },
      "resolver": undefined
    }

So, "^components/(.*)$": "<rootDir>/src/components/$1" in the moduleNameMapper solved the first issue above:)

But now I'm getting another error:

FAIL  src/pages/errorpage/tests/error.test.jsx
  ● Test suite failed to run

    Cannot find module 'locales' from 'src/utils/helpers/helpers.js'

    Require stack:
      src/utils/helpers/helpers.js
      src/components/text/index.jsx
      src/pages/errorpage/error.jsx
      src/pages/errorpage/tests/error.test.jsx

      29 | import { nb, enGB } from "date-fns/locale";
      30 | 
    > 31 | import translations from "locales";
         | ^
      32 | 
      33 | export const capitalize = string => {
      34 |   if (typeof string === "string") {

I updated the package.json above. The relative directory of locales is src/locales . Shouldn't this work:

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

I tried using: "/^locales\\/(.*)$/": "<rootDir>/src/locales/$1"

The solution was to use: "^locales(.*)$": "<rootDir>/src/locales/$1"

Answer 2

Check the path to your fileMock.js

In my case, I took a long time to realize that the ___test___ folder had three underscores instead of two.

And check the content of the file In my case, this is: module.exports = 'test-file-stub'

You will also need to install jest-transform-stub first.