Vite+React项目中使用Jest时如何解析绝对路径？

我在基于Vite的React项目中使用Jest编写测试用例时，遇到Jest无法识别导入语句中绝对路径的问题。以下是相关配置文件及报错信息：

tsconfig.json #

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["./types/fin", "./types/heap", "node", "jest", "vite/client", "vite-plugin-svgr/client"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx",
    "noImplicitAny": false,
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"]
    }
  },
  "include": ["src", "src/config/authConfig.ts"],
  "exclude": ["node_modules", "build"]
}

jest.config.js #

module.exports = {
  preset: 'ts-jest',
  collectCoverage: true,
  collectCoverageFrom: ['./src/**'],
  testEnvironment: 'node',
  moduleNameMapper: { '^.+\\.(css|less|gif|jpg|jpeg|svg|png)$': 'module.exports = {};' },
};

报错信息 #

● Test suite failed to run

    Cannot find module 'src/pages/page1' from 'src/components/Modules/Module1.tsx'

    Require stack:
      'src/components/Modules/Module1.tsx'
      'src/components/Modules/Module1.test.tsx'

      1 | import { useState, useEffect, useContext, useRef } from 'react';
    > 2 | import { dummy } from 'src/pages/page1';
        | ^
      3 | import { dummy2 } from 'src/pages/page';

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.require (src/components/Modules/Module1.tsx:2:1)
      at Object.<anonymous> (src/components/Modules/Module1.tsx.test.tsx:2:1)

解决办法 #

Jest不会自动读取tsconfig.json中的paths配置，需要手动在Jest配置中添加路径映射，同时修正测试环境配置：

修改jest.config.js如下：

module.exports = {
  preset: 'ts-jest',
  collectCoverage: true,
  collectCoverageFrom: ['./src/**'],
  testEnvironment: 'jsdom', // React项目需用jsdom环境而非node
  moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1', // 映射src开头的绝对路径
    '^.+\\.(css|less|gif|jpg|jpeg|svg|png)$': 'module.exports = {};'
  },
  modulePaths: ['<rootDir>'], // 对应tsconfig中的baseUrl配置
};

关键说明：

• moduleNameMapper中添加'^src/(.*)$': '<rootDir>/src/$1'，将所有src/xxx格式的导入映射到项目根目录下的src/xxx文件。
• 把testEnvironment从node改为jsdom，因为React组件依赖浏览器DOM环境，node环境无法满足测试需求。
• modulePaths: ['<rootDir>']指定Jest的模块查找根路径，对应tsconfig中的baseUrl: "."。

修改完成后重新运行测试，Jest就能正确识别绝对路径导入了。

内容的提问来源于stack exchange，提问作者Avanish Srivastava