Jest报错：无法找到模块，如何同步Jest与tsconfig配置？

你的问题核心是tsconfig里配置了baseUrl: "src"让项目可以用绝对路径导入，但Jest默认不识别这个规则，导致测试时找不到导入的文件。只需要在jest.config.ts里添加路径解析配置，和tsconfig对齐即可。

具体修改步骤 #

在你的jest配置中新增modulePaths字段，指定与tsconfig的baseUrl对应的根目录：

const config: Config.InitialOptions = {
    preset: "ts-jest",
    testEnvironment: "jsdom",
    verbose: true,
    rootDir: `src/`,
    // 新增这行，让Jest从src目录开始解析绝对路径导入
    modulePaths: ["<rootDir>/"],
    moduleNameMapper: {
        "\\.(jpg|png|webp|css|scss)$": "<rootDir>/__tests__/mocks/mockAssets/mockEmpty.ts",
        "\\.svg": "<rootDir>/__tests__/mocks/mockAssets/mockReactComponents.ts",
    },
    testMatch: ["**/*.test.tsx"],
    setupFilesAfterEnv: ["<rootDir>/__tests__/setupTest.ts"],
};

export default config;

原理说明 #

• tsconfig的baseUrl: "src"告诉TypeScript，所有以ui/xxx开头的导入，都从src目录下查找对应文件
• Jest不会自动读取tsconfig的路径规则，所以需要通过modulePaths: ["<rootDir>/"]明确告诉Jest，解析模块时从rootDir（也就是你配置的src/）开始搜索，这样就能和项目的导入规则保持一致

如果后续你的tsconfig中添加了paths别名（比如"@ui/*": ["ui/*"]），只需要在moduleNameMapper中补充对应的映射规则即可，比如：

moduleNameMapper: {
    // 原有资源mock规则
    "\\.(jpg|png|webp|css|scss)$": "<rootDir>/__tests__/mocks/mockAssets/mockEmpty.ts",
    "\\.svg": "<rootDir>/__tests__/mocks/mockAssets/mockReactComponents.ts",
    // 新增别名映射
    "^@ui/(.*)$": "<rootDir>/ui/$1"
},

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