Next.js + Jest moduleNameMapper 沒有 TypeScript

Question

我正在努力讓moduleNameMapper與 NextJS / JavaScript 一起工作。 對於這個項目，我們沒有使用 TypeScript。

• 下一個：12.2.5
• 反應：18.2.0
• 開玩笑：29.0.1
• Jest 環境 jsdom：29.0.1

這是我的jsconfig.json文件

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

我可以在我的項目中執行以下操作

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

但是，當我嘗試測試時，我收到此消息Cannot find module @/hooks/fetch from pages/account/login/index.js

這是我的jest.config.js文件

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)

如您所見，我正在嘗試 map moduleNameMapper中的路徑，但這仍然無法正常工作。 我該如何糾正？

我希望對項目和測試項目使用相同的導入格式

非常感謝

Answer 1

設法通過更改jsconfig.js文件來解決此問題

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

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

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

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

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

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

來源： https://github.com/vercel/next.js/issues/36682