Configuring Jest to Resolve Absolute Path Module Imports and Fix 'Cannot find module' Errors

Problem Background and Error Analysis

When using Jest for JavaScript project testing, developers often encounter module resolution errors, particularly when code uses absolute paths for module imports. The typical error message appears as:

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)

This error typically occurs with import statements using absolute paths, such as:

import AppContainer from 'src/views/app';

While test cases using relative paths run correctly, indicating that the issue lies not with the modules themselves but with Jest's module resolution configuration.

Understanding moduleDirectories Configuration

Jest's moduleDirectories configuration determines the search paths for module resolution. By default, Jest only looks for modules in the node_modules directory. When support for project-internal absolute paths is needed, additional search directories must be explicitly configured.

Consider the following configuration example:

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

This configuration instructs Jest to first search for modules in the node_modules directory, and if not found, continue searching in the src directory. This approach enables the use of absolute paths relative to the src directory.

Solution Implementation

Based on the configuration principles above, we have two main solutions:

Solution 1: Adjust Import Paths

Modify the original import statement from:

import AppContainer from 'src/views/app';

To:

import AppContainer from 'views/app';

This modification leverages the moduleDirectories configuration that includes the src directory, allowing views/app to correctly resolve to the src/views/app path.

Solution 2: Maintain Original Import Style

If preserving the original src/views/app import style is desired, alternative configuration methods can be employed. Referencing other solutions, we can use moduleNameMapper:

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

Or use the modulePaths configuration:

"modulePaths": [
    "<rootDir>"
]

Configuration Comparison and Best Practices

Different configuration approaches have their respective advantages and disadvantages:

• moduleDirectories approach: Clean and straightforward, suitable for projects with relatively fixed structures
• moduleNameMapper approach: Offers greater flexibility, capable of handling more complex path mapping requirements
• modulePaths approach: Provides root directory-level path resolution support

In practical projects, it's recommended to choose the appropriate solution based on project structure and team preferences. For most React projects, the moduleDirectories approach including the src directory is sufficient and results in cleaner code.

Complete Configuration Example

Below is a complete Jest configuration example demonstrating proper setup for absolute path support:

"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"
    ]
}

Conclusion

Jest's module resolution mechanism is relatively strict and requires explicit configuration to support project-internal absolute path imports. By properly configuring parameters such as moduleDirectories, moduleNameMapper, or modulePaths, the Cannot find module error can be effectively resolved. In practical development, it's recommended that teams standardize module import conventions and complete the corresponding Jest configuration during the project's initial stages to avoid subsequent debugging costs.