Using Jest's moduleNameMapper with Next.js without TypeScript

Question

Using Jest's moduleNameMapper with Next.js without TypeScript

I've been encountering some challenges trying to implement moduleNameMapper in NextJS using JavaScript. In this particular project, TypeScript is not being utilized.

Next: 12.2.5
React: 18.2.0
Jest: 29.0.1
Jest environment jsdom: 29.0.1

Below is the content of my jsconfig.json file

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/components/*" : ["components/*"],
            "@/styles/*" : ["styles/*"],
            "@/config/*" : ["config/*"],
            "@/hooks/*" : ["hooks/*"],
            "@/store/*" : ["store/*"],
        }
    }
}

In my project, I am able to do the following imports

import Layout from "@/components/Layout"
import useFetch from "@/hooks/fetch"

However, during testing, I encounter an error message stating

Cannot find module @/hooks/fetch from pages/account/login/index.js

Shown below is my jest.config.js setup

const nextJest = require('next/jest');

const createJestConfig = nextJest({
    dir: "./",
});
const customJestConfig = {
    moduleDirectories: ["node_modules", "<rootDir>"],
    moduleNameMapper: {
        "^@/hooks/*": "/hooks/*"
    },
    testEnvironment: "jest-environment-jsdom",
}
module.exports = createJestConfig(customJestConfig)

Despite my efforts to map the paths in moduleNameMapper, the issue persists. How can I resolve this?

I aim to maintain consistent import formatting for both the project and its tests.

Thank you

javascript reactjs next.js jestjs

Answer 1

Answer №1

Solved the issue by making modifications to the jsconfig.js file

const nextJest = require('next/jest');

const customJestConfig = {
    moduleDirectories: ["node_modules", "<rootDir>"],
    testEnvironment: "jest-environment-jsdom",
};

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

module.exports = async () =>
{
  // Generate Next.js jest configuration presets
  const jestConfig = await createJestConfig();

  // Custom `moduleNameMapper` setup
  const moduleNameMapper = {
    ...jestConfig.moduleNameMapper,
    '^@/(.*)$': '<rootDir>/$1',
  };

  return { ...jestConfig, moduleNameMapper };
};

Source: https://github.com/vercel/next.js/issues/36682

Answer 2

Solved the issue by making modifications to the jsconfig.js file

const nextJest = require('next/jest');

const customJestConfig = {
    moduleDirectories: ["node_modules", "<rootDir>"],
    testEnvironment: "jest-environment-jsdom",
};

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

module.exports = async () =>
{
  // Generate Next.js jest configuration presets
  const jestConfig = await createJestConfig();

  // Custom `moduleNameMapper` setup
  const moduleNameMapper = {
    ...jestConfig.moduleNameMapper,
    '^@/(.*)$': '<rootDir>/$1',
  };

  return { ...jestConfig, moduleNameMapper };
};

Source: https://github.com/vercel/next.js/issues/36682

Using Jest's moduleNameMapper with Next.js without TypeScript

Answer №1

Similar questions

Control and manage AJAX POST requests in the controller

Steps to update the active state in the "reducer" when clicking on elements outside of the "reducer" area

While iterating through a dynamically generated JSON data array, omitting the display of the ID (both title and value) is preferred

What could be causing the Material UI tabs to malfunction when dynamically populating the content using a .map function instead of manually inserting it?

Looking to display the "loading....." message on a PHP page?

Does GIF animation operate on the same thread as JavaScript in all popular web browsers?

Uncovering hidden links in a menu with Python Selenium and JavaScript

Using JQuery to monitor the loading of a newly selected image src attribute

React's struggle with implementing flexbox functionality

Press the second form submit button after the completion of another Observable

Here's a new take on the topic: "Implementing image change functionality for a specific div in Angular 8 using data from a loop"

Struggling with parsing a JSON object in ReactJS and looking for assistance

Rearranging table rows with jQuery based on numerical values within child elements

Why isn't the jQuery click() function functioning on my modified HTML?

Is it possible to remove certain 'css-' class names that MUI automatically applies to its components? (Using Next JS and MUI)

Transfer the layout from one HTML file to multiple others without the need to retype the code

Creating a backup link for a video player component in NextJs

React - Customizable Counter Components - Control All Counters with Parent Component

Managing nested Angular repeats with counter

Adding a JSON array to HTML using JavaScript