如何使用 ts-jest 解析 next.js 中的别名组件？

Question

我使用 typescript、nextjs 和 Jest，我想在我的 tsconfig 中使用别名而不是使用“../../..”，这可行，但是当我添加 Jest 时，我无法正确配置它。

这是我的 tsconfig.json ：

{
  "compilerOptions": {
    "target": "es5",
    "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": {
      "@components/*": ["./src/components/*"],
      "@providers/*": ["./src/providers/*"],
      "@themes/*": ["./src/themes/*"],
      "@assets/*": ["./src/assets/*"],
      "@c/*": ["./src/components/*"],
      "@helpers/*": ["./src/helpers/*"],
      "@store/*": ["./src/store/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@pages/*": ["./src/pages/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

所以，当我运行“jest”时，由于没有解析导入中的别名，它给了我一个错误

我认为 ts-jest 的文档没有解释这一点，我需要解决它的解决方案。

> test
> jest

 PASS  src/__tests__/index.test.tsx (10.651 s)
  MainPage
    ✓ one equal by one (2 ms)

 FAIL  src/components/Body/index.test.tsx
  ● Test suite failed to run

    Configuration error:
    
    Could not locate module @themes/DatePickerTheme mapped as:
    [
      "/home/kourosh/Documents/projects/vandapayment/frontend/frontend-web-app/themes/DatePickerTheme"
    ].
    
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/themes\/(.*)/": "[
          "/home/kourosh/Documents/projects/vandapayment/frontend/frontend-web-app/themes/$1"
        ]"
      },
      "resolver": undefined
    }

      1 | import { Box, Flex, VStack } from "@chakra-ui/react";
      2 | import { DatePicker, RangeDatePicker } from "jalali-react-datepicker";
    > 3 | import { DatePickerTheme } from "@themes/DatePickerTheme";
        | ^
      4 | export default function Body() {
      5 |   return (
      6 |   

      at createNoMappedModuleFoundError (node_modules/jest-resolve/build/resolver.js:579:17)
      at Object.<anonymous> (src/components/Body/index.tsx:3:1)

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

Answer 1

这是最好的解决方案，解决了我的问题 https://github.com/vercel/next.js/tree/canary/examples/with-jest 检查此存储库 并这样做：

并在 jest.config.js 中执行以下操作：

  moduleNameMapper: {
    // Handle module aliases (this will be automatically configured for you soon)
    "^@/components/(.*)$": "<rootDir>/components/$1",

    "^@/pages/(.*)$": "<rootDir>/pages/$1",
    "^@/services/(.*)$": "<rootDir>/services/$1",
  },