如何解决Jest测试中出现的Cannot use import statement outside a module错误？

问题描述 #

尝试使用Jest运行TypeScript文件的单元测试时失败，核心报错为SyntaxError: Cannot use import statement outside a module，提示无法在模块外使用import语句。

错误信息 #

freephoenix888@freephoenix888:~/Programming/test$ npx jest

> test@1.0.0 test
> jest

 FAIL  ./sum.test.ts
  ● 测试套件运行失败

    Jest遇到意外的令牌

    Jest无法解析文件，这种情况通常发生在代码或其依赖使用非标准JavaScript语法，或者Jest未配置为支持此类语法时。

    Jest默认支持Babel，会根据你的Babel配置将文件转换为有效的JS。

    默认情况下，transformers会忽略"node_modules"文件夹。

    你可以尝试以下解决方案：
     • 如果你尝试使用ECMAScript Modules，请查看官方文档了解启用方法。
     • 如果你尝试使用TypeScript，请查看官方文档了解配置方式。
     • 如果你想转换部分"node_modules"文件，可以在配置中指定自定义的"transformIgnorePatterns"。
     • 如果你需要自定义转换，请在配置中指定"transform"选项。
     • 如果你只是想模拟非JS模块（例如二进制资源），可以使用"moduleNameMapper"配置选项来替换它们。

    你可以在官方文档中找到这些配置选项的更多细节和示例，有关自定义转换的信息也可查阅官方文档。

    详细信息：

    /home/freephoenix888/Programming/test/sum.test.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { sum } from "./sum";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1449:14)

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

复现步骤 #

• 初始化npm项目

  freephoenix888@freephoenix888:~/Programming/test$ npm init -y
  Wrote to /home/freephoenix888/Programming/test/package.json:
  
  {
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
  }
  

• 安装typescript

  freephoenix888@freephoenix888:~/Programming/test$ npm install --save-dev typescript
  
  added 1 package, and audited 2 packages in 10s
  
  found 0 vulnerabilities
  

• 安装jest

  freephoenix888@freephoenix888:~/Programming/test$ npm install --save-dev jest
  
  added 277 packages, and audited 279 packages in 41s
  
  29 packages are looking for funding
    run `npm fund` for details
  
  found 0 vulnerabilities
  

• 安装@types/jest

  freephoenix888@freephoenix888:~/Programming/test$ npm install --save-dev @types/jest
  
  added 8 packages, and audited 287 packages in 4s
  
  29 packages are looking for funding
    run `npm fund` for details
  
  found 0 vulnerabilities
  

• 创建sum.ts文件，内容如下：

  export function sum({firstNumber, secondNumber} : {firstNumber: number , secondNumber: number}) {
     return firstNumber + secondNumber;
  }
  

• 创建sum.test.ts文件，内容如下：

  import { sum } from "./sum"
  
  test('sum', () => {
     expect(
        sum({
           firstNumber: 5,
           secondNumber: 5
        })
     ).toBe(10)
  })
  

• 执行npx jest命令，触发上述错误

解决方案 #

方案1：使用ts-jest转换TypeScript文件 #

1. 安装必要依赖：

   npm install --save-dev ts-jest @types/jest
   

2. 生成jest配置文件：

   npx ts-jest config:init
   

3. 修改package.json中的test脚本：

   "scripts": {
     "test": "jest"
   }
   

4. 运行测试：

   npm test
   

方案2：启用ECMAScript Modules（ESM） #

1. 修改package.json，添加"type": "module"：

   {
     "type": "module",
     // 其他原有配置
   }
   

2. 安装jest的ESM支持依赖：

   npm install --save-dev jest-environment-jsdom
   

3. 创建jest.config.mjs文件，配置ESM：

   export default {
     testEnvironment: 'jest-environment-jsdom',
     transform: {}
   };
   

4. 运行测试：

   npx jest
   

方案3：使用Babel转换TypeScript #

1. 安装Babel相关依赖：

   npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-typescript
   

2. 创建babel.config.json文件：

   {
     "presets": [
       ["@babel/preset-env", {"targets": {"node": "current"}}],
       "@babel/preset-typescript"
     ]
   }
   

3. 修改package.json的test脚本为"test": "jest"，运行测试即可。

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