Cannot locate module in Jest configuration

Question

Cannot locate module in Jest configuration

I'm struggling to understand config files and encountering issues while attempting to run jest unit tests:

 Cannot locate module '@/app/utils/regex' from 'src/_components/DriverSearchForm.tsx'

Here's my jest configuration:

    import type { Config } from 'jest'
import nextJest from 'next/jest.js'

const createJestConfig = nextJest({
  dir: './',
})

const config: Config = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  moduleDirectories: ['node_modules', '<rootDir>/src'],
  moduleNameMapper: {
    '^@/_components/(.*)': '<rootDir>/src/_components/$1',
  },
  testEnvironment: 'jsdom',
  preset: 'ts-jest',
  transform: {
    '^.+\\.(js|jsx|ts|tsx|mjs)$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
  },
}

export default createJestConfig(config)

typescript unit-testing next.js config ts-jest

Answer 1

Answer №1

In this setup, the key serves as the alias for the module name, while the value represents the target module to map to. For instance, when you import from @/app/utils/regex, it will be directed to the <rootDir>/app/utils/regex module.

<rootDir>/jest.config.js:

moduleNameMapper: {
    '^@/app/(.*)': '<rootDir>/app/$1',
}

<rootDir>/tsconfig.json:

"paths": {
  "@/app/*": [
    "app/*"
  ]
}

<rootDir>/app/utils/regex.ts

:

export const regex = /test/i

index.ts:

import { regex } from '@/app/utils/regex';

console.log(regex);

index.test.ts:

import './';

describe('78224123', () => {
  test('should pass', () => {
    expect(1 + 1).toEqual(2);
  });
});

Output of the test:

  console.log
    /test/i

      at Object.log (stackoverflow/78224123/index.ts:3:9)

 PASS  stackoverflow/78224123/index.test.ts (7.62 s)
  78224123
    √ should pass (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        18.59 s

Answer 2

In this setup, the key serves as the alias for the module name, while the value represents the target module to map to. For instance, when you import from @/app/utils/regex, it will be directed to the <rootDir>/app/utils/regex module.

<rootDir>/jest.config.js:

moduleNameMapper: {
    '^@/app/(.*)': '<rootDir>/app/$1',
}

<rootDir>/tsconfig.json:

"paths": {
  "@/app/*": [
    "app/*"
  ]
}

<rootDir>/app/utils/regex.ts

:

export const regex = /test/i

index.ts:

import { regex } from '@/app/utils/regex';

console.log(regex);

index.test.ts:

import './';

describe('78224123', () => {
  test('should pass', () => {
    expect(1 + 1).toEqual(2);
  });
});

Output of the test:

  console.log
    /test/i

      at Object.log (stackoverflow/78224123/index.ts:3:9)

 PASS  stackoverflow/78224123/index.test.ts (7.62 s)
  78224123
    √ should pass (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        18.59 s

Cannot locate module in Jest configuration

Answer №1

Similar questions

What is the process for unsubscribing through an HTTP post request within an Angular application

Creating and troubleshooting an Angular 7 project in Visual Studio 2017

Introducing a delay in an observable causes incomplete data to be received in Angular using rxjs

Closing a modal from a nested modal sub-component

Dealing with errors when making an API call within the getStaticProps method in NextJS

Exploring the Usage of Jasmine Testing for Subscribing to Observable Service in Angular's OnInit

Erase Typescript Service

Removing data based on various criteria in Prisma

Tips for simulating a configuration dependency using Proxyquire in TypeScript

What is the most effective way to transfer visitor hits information from an Express.js server to Next.js?

Remove user from axios response interceptor for server-side component

Typescript library available as a private npm dependency

Is it possible for TypeScript to convert a generic enum type into a string at runtime?

Enhance Summernote functionality by creating a custom button that can access and utilize

Aligning Description Item components horizontally in antdLearn how to easily horizontally align Description

Angular2 Navigation: Redirecting to a dynamically constructed route

Encountering an unexpected token error in Vercel during deployment, even though the code runs smoothly in the

What is the best way to halt the parcel/babel/typescript process when encountering compilation errors or warnings?

Issue with MathJax rendering within an Angular5 Div that's being observed

Facing problem with Angular 7 when making a GET request for non-JSON data