Jest、ts-jest、带有 ES 模块导入的打字稿：找不到模块

typescript

使用Jest和ts-jest进行单元测试时，有时会遇到找不到模块的问题。这通常发生在使用ES模块导入的typescript文件中。在这篇文章中，我们将探讨这个问题并提供解决方案。

问题描述

当我们使用Jest和ts-jest进行单元测试时，我们通常会使用import语句导入要测试的模块。然而，当我们使用ES模块导入的typescript文件时，Jest可能会报告找不到模块的错误。

这通常发生在以下情况下：

1. 在typescript文件中使用ES模块导入语法导入模块。

2. Jest配置文件中没有正确地设置模块解析器。

解决方案

为了解决这个问题，我们需要在Jest的配置文件中设置正确的模块解析器。我们可以通过在jest.config.JS文件中添加moduleNameMapper选项来实现这一点。

首先，我们需要安装jest和ts-jest作为开发依赖项：

npm install jest ts-jest --save-dev

接下来，我们需要创建jest.config.JS文件并配置moduleNameMapper选项：

Javascript
module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

在上面的配置中，我们使用正则表达式将模块名称映射到正确的路径。这里的'^@/(.*)$'表示以@/开头的模块名称，'/src/$1'表示要导入的实际路径。

案例代码

让我们通过一个简单的示例来演示上述问题和解决方案。

假设我们有一个名为math.ts的typescript文件，其中包含一个简单的函数add：

typescript
export function add(a: number, b: number): number {
  return a + b;
}

然后，我们有一个名为math.test.ts的测试文件，其中我们想要测试math.ts中的add函数：

typescript
import { add } from '@/math';
test('add function should return the sum of two numbers', () => {
  expect(add(2, 3)).toBe(5);
});

在上面的代码中，我们使用ES模块导入语法从math.ts文件中导入add函数。

当我们运行Jest测试时，如果没有正确配置moduleNameMapper选项，Jest将会报错找不到模块@/math。

为了解决这个问题，我们可以按照之前提到的解决方案，在jest.config.JS文件中配置moduleNameMapper选项。

Javascript
module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

通过这样的配置，Jest将能够正确地找到并导入@/math模块，我们的测试将成功执行。

在使用Jest和ts-jest进行单元测试时，当遇到找不到模块的问题时，这通常是由于使用ES模块导入的typescript文件以及没有正确配置模块解析器所导致的。通过在Jest的配置文件中设置正确的moduleNameMapper选项，我们可以解决这个问题并使测试能够顺利执行。