在 Next.js 上使用 jest 找不到模块错误

Question

Hello i have some troubles making jest work on my nextjs application, when i use the script "jest" i always get a failed execution and this result

 FAIL  __tests__/index.test.tsx
  ● Test suite failed to run

    Cannot find module '@components/Layout' from 'pages/404.tsx'

    Require stack:
      pages/404.tsx
      __tests__/index.test.tsx

    > 1 | import { Layout } from '@components/Layout'
        |                                            ^
      2 | import { ContainerChild } from '@components/Container'
      3 | import { Button } from '@castia/components.ui.button'
      4 | import Image from 'next/image'

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:491:11)
      at Object.<anonymous> (pages/404.tsx:1:44)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.31 s
Ran all test suites.

this is my test file

import renderer from "react-test-renderer";
import NotFound from "../pages/404";

describe("404 NotFound page", () => {
  const tree = renderer.create(<NotFound />).toJSON();
  expect(tree).toMatchSnapshot();
});

and this is my component file

import { Layout } from '@components/Layout'
import { ContainerChild } from '@components/Container'
import Image from 'next/image'

import styles from '@styles/404.module.scss'

const metaTags = {
  title: 'Castia | 404',
  description: 'No encontramos la página que buscabas',
}

export default function NotFoundPage() {
  return (
    <Layout metaTags={metaTags}>
      <ContainerChild composition={'default'}>
        <div className={styles.error404}>
          <div>
            <Image
              src="/assets/image/error-404.png"
              alt="No encontramos la página que buscabas"
              width={475}
              height={304}
            />
          </div>

          <h3>¡Ups! No encontramos la página que buscabas.</h3>
          <p>
            Revisa que hayas escrito correctamente el enlace o regresa a la
            página principal.
          </p>
          <div className={styles.containerBtn}>

          </div>
        </div>
      </ContainerChild>
    </Layout>
  )
}

I have my jest.config.js file configured like this

const nextJest = require('next/jest')
const createJestConfig = nextJest({
  dir: './',
})
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/pages/(.*)$': '<rootDir>/pages/$1',
    '^@/ui/(.*)$': '<rootDir>/ui/$1',
    '^@/api/(.*)$': '<rootDir>/api/$1',
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/context/(.*)$': '<rootDir>/context/$1',
    '^@/styles/(.*)$': '<rootDir>/styles/$1',
    '^@/lib/(.*)$': '<rootDir>/lib/$1',
    '^@/hooks/(.*)$': '<rootDir>/hooks/$1',
    '^@/utils/(.*)$': '<rootDir>/utils/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(customJestConfig)

and my tsconfig.json like this

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@ui/*": ["ui/*"],
      "@api/*": ["pages/api/*"],
      "@components/*": ["components/*"],
      "@context/*": ["context/*"],
      "@styles/*": ["styles/*"],
      "@lib/*": ["lib/*"],
      "@hooks/*": ["hooks/*"],
      "@utils/*": ["utils/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

but i dont know why this is happening to me

Answer 1

It seems you forgot to add the absolute path mapping in your tsconfig.json for the 'pages' directory.

Try adding this to your tsconfig.json

{...
"paths": {
   ... other paths mappings
  "@pages/*": ["pages/*"],
...
}

Answer 2

I think it should be "@/components" in your component file