Jest Module Name Mapper Configuration

This challenge focuses on configuring Jest's moduleNameMapper to resolve module imports in your TypeScript project. Properly configuring this is crucial for maintaining clean import paths, especially when dealing with aliases or different directory structures, and it plays a vital role in how Jest finds and loads your modules during testing.

Problem Description

You need to create a Jest configuration that correctly maps module import paths in a TypeScript project. Specifically, you will be given a set of rules that define how certain import paths should be transformed into actual file paths. Your task is to implement these rules within Jest's moduleNameMapper option in your jest.config.js (or jest.config.ts) file. This will ensure that Jest can correctly resolve your module imports when running tests.

Key Requirements:

• Implement moduleNameMapper in your Jest configuration.
• The mapper should handle aliased imports, typically starting with @/ or a project-specific prefix.
• The mapper should also handle relative path transformations, for example, mapping a specific directory to a root-level alias.
• Ensure that the mapper correctly resolves TypeScript files (.ts and .tsx) and JavaScript files (.js and .jsx).

Expected Behavior:

When Jest encounters an import statement in your test files (e.g., import { someFunction } from '@/utils/helpers';), it should use the moduleNameMapper configuration to translate that import path into a correct file path on your file system (e.g., __dirname + '/src/utils/helpers.ts').

Edge Cases:

• Imports that do not match any mapping rules should still resolve correctly based on standard Node.js module resolution.
• The mapper should handle cases where the mapped path points to a directory containing an index.ts or index.js file.
• Consider imports that might resolve to JavaScript files even when the project is primarily TypeScript.

Examples

Let's assume your project structure looks like this:

your-project/
├── src/
│   ├── components/
│   │   ├── Button/
│   │   │   ├── index.ts
│   │   │   └── Button.tsx
│   │   └── Input/
│   │       ├── index.ts
│   │       └── Input.tsx
│   ├── utils/
│   │   ├── api.ts
│   │   └── helpers.ts
│   └── index.ts
├── tests/
│   └── components/
│       └── Button.test.ts
├── jest.config.js
└── tsconfig.json

Example 1: Alias for the src directory

Input (in jest.config.js):
// Some existing Jest config...
module.exports = {
  // ... other configurations
  moduleNameMapper: {
    // Your configuration here
  },
};

Consider this import in `tests/components/Button.test.ts`:
import { Button } from '@/components/Button'; // Assuming Button exports from '@/components/Button/index.ts'

Desired Mapping Rule:
Map imports starting with '@/' to the 'src/' directory.

Example 2: Specific utility path mapping

Input (in jest.config.js):
// ... other configurations
moduleNameMapper: {
  // Your configuration here
},

Consider this import in `tests/components/Button.test.ts`:
import { api } from '@/utils/api';

Desired Mapping Rule:
Map imports starting with '@/utils/' to the actual path within the 'src/utils/' directory.

Example 3: Mapping a directory to a root alias

Input (in jest.config.js):
// ... other configurations
moduleNameMapper: {
  // Your configuration here
},

Consider this import in `tests/components/Button.test.ts`:
import { someHelper } from '@helpers/helpers'; // A less common but possible alias

Desired Mapping Rule:
Map imports starting with '@helpers/' to the 'src/utils/' directory.

Constraints

• Your moduleNameMapper configuration should be a JavaScript object compatible with Jest's moduleNameMapper option.
• Use regular expressions for your mappings.
• The solution should work with standard Jest and TypeScript setups.
• Assume the presence of a tsconfig.json file that correctly defines your project's paths and compiler options.
• The target files will be .ts, .tsx, .js, and .jsx.

Notes

• The moduleNameMapper option in Jest expects an object where keys are regular expressions (or strings that will be converted to regex) representing the import path to match, and values are the replacement paths.
• You'll likely need to use __dirname or a similar mechanism to construct absolute or relative paths correctly from your Jest configuration file.
• Consider how Jest handles file extensions when resolving modules. You might need to explicitly include them in your replacement paths or rely on Jest's default behavior for .ts/.js.
• Refer to the Jest documentation for moduleNameMapper for detailed syntax and examples.