Jest + Typescript +绝对路径(baseUrl)给出错误:找不到模块

在使用 Jest 和 TypeScript 进行单元测试时，配置绝对路径（如 baseUrl）可以帮助简化模块导入路径，但在某些情况下可能会遇到“找不到模块”的错误。以下是解决这个问题的详细步骤和原因分析：

基础概念

1. Jest: 一个流行的 JavaScript 测试框架。
2. TypeScript: 一种由微软开发的强类型、面向对象的编程语言，最终会被编译成 JavaScript。
3. 绝对路径 (baseUrl): 在 TypeScript 配置中，baseUrl 用于指定模块解析的根目录。

相关优势

• 简化导入路径: 使用绝对路径可以避免相对路径的嵌套，使代码更简洁。
• 提高可维护性: 统一的路径配置使得项目结构变更时更容易维护。

类型

• 配置文件: tsconfig.json 或 jsconfig.json
• 测试配置: jest.config.js

应用场景

• 大型项目或多人协作项目，需要统一和简化模块导入路径。
• 需要频繁更改项目结构的项目。

问题原因

1. 配置错误: tsconfig.json 或 jest.config.js 中的 baseUrl 配置不正确。
2. 路径解析问题: Jest 可能没有正确解析 TypeScript 的路径配置。
3. 模块不存在: 指定的模块路径确实不存在。

解决方法

以下是一个示例配置，展示如何在 tsconfig.json 和 jest.config.js 中正确配置绝对路径。

1. 配置 tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    // 其他配置...
  }
}

2. 配置 jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  // 其他配置...
};

3. 确保模块存在

确保你尝试导入的模块确实存在于指定的路径中。例如，如果你在测试中导入 @/components/Button，确保 src/components/Button.ts 文件存在。

4. 检查 Jest 配置

确保 jest.config.js 中的 moduleNameMapper 正确映射了 TypeScript 的路径配置。

示例代码

假设你有一个简单的 TypeScript 文件 src/components/Button.ts：

// src/components/Button.ts
export const sayHello = () => {
  return 'Hello, World!';
};

然后在测试文件中导入这个模块：

// __tests__/Button.test.ts
import { sayHello } from '@/components/Button';

test('sayHello should return "Hello, World!"', () => {
  expect(sayHello()).toBe('Hello, World!');
});

参考链接

• TypeScript 官方文档 - 路径映射
• Jest 官方文档 - 模块名称映射

通过以上配置和检查步骤，你应该能够解决在使用 Jest 和 TypeScript 时遇到的“找不到模块”的错误。