Jest 报错：Cannot use import statement outside a module

Jest 是一个流行的 JavaScript 测试框架。但是，当你试图在 Jest 中使用 ES6 模块语法进行导入时，你可能会遇到 "Cannot use import statement outside a module" 的错误提示。本文将解释这个错误的原因，并提供解决方法。

为什么会出现这个错误？

这个错误的原因是因为 Jest 默认使用 CommonJS 模块语法，而不是 ES6 模块语法。ES6 模块语法中的 import 语句是使用在浏览器中的，因此当你在 Node.js 中运行测试时，Jest 会引发这个错误。

如何解决这个错误？

此错误的解决方法有两种。第一种是使用 CommonJS 的 require() 语法来代替 import 语句。第二种方法是在 Jest 配置文件中启用 ES6 模块语法支持。以下是两种方法的详细步骤。

方法一：使用 CommonJS 的 require() 代替 import

如果你想要在 Jest 中使用 require() 语法代替 import 语句，那么你需要这样做：

const myFunction = require('./myModule').myFunction;

例如，在使用 import 导入 lodash 时，你可以使用以下代码：

// 使用 import 语句导入 lodash
import _ from 'lodash';

// ...

// 使用 require() 代替 import 导入 lodash
const _ = require('lodash');

在使用 require() 导入相同的模块时，你需要使用以下代码：

const _ = require('lodash');

方法二：在 Jest 配置文件中启用 ES6 模块语法支持

如果你想要在 Jest 中使用 ES6 模块语法，那么你需要在 Jest 的配置文件中启用 ES6 模块语法支持。在项目根目录下创建一个 jest.config.js 文件，并添加以下代码：

// www.javascriptcn.com code example
// jest.config.js
export default {
  // ...
  "preset": "ts-jest",
  "testEnvironment": "node",
  "moduleFileExtensions": ["js", "ts", "json"],
  "globals": {
    "ts-jest": {
      "compiler": "ttypescript"
    }
  },
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  "moduleNameMapper": {
    "^~(.*)$": "<rootDir>/src/$1",
    "^@root(.*)$": "<rootDir>/src/$1",
    "^@test(.*)$": "<rootDir>/test/$1",
    "^@models(.*)$": "<rootDir>/src/models/$1",
    "^@server(.*)$": "<rootDir>/src/server/$1",
    "^@typings(.*)$": "<rootDir>/src/typings/$1",
    "^@utilities(.*)$": "<rootDir>/src/utilities/$1",
    "^@examples(.*)$": "<rootDir>/examples/$1",
    "^@modules/(.*)$": "<rootDir>/src/modules/$1"
  }
}

上述配置是使用 TypeScript 的示例，这里略作修改：

// www.javascriptcn.com code example
// jest.config.js
export default {
  "testEnvironment": "node",
  "extensionsToTreatAsEsm": [".ts"],
  "moduleFileExtensions": [
    "ts",
    "js",
    "json"
  ],
  "transform": {
    "^.+\\.(ts)$": "ts-jest"
  },
  "globals": {
    "ts-jest": {
      "compiler": "ttypescript"
    }
  }
}

你需要将 jest.config.js 文件中的 extensionsToTreatAsEsm 属性设置为包含 .ts 扩展名的数组。设置之后，Jest 就会理解 TypeScript 的 ES6 模块语法了。

示例代码

以下是一个使用 TypeScript 的示例代码，用于演示在 Jest 中启用 ES6 模块语法支持：

// www.javascriptcn.com code example
// myModule.ts
export const myFunction = (): string => 'Hello World!';


// myModule.test.ts
import { myFunction } from './myModule';

describe('myFunction', () => {
  test('returns Hello World!', () => {
    expect(myFunction()).toBe('Hello World!');
  });
});

如果你尝试在 Jest 中使用这个示例代码，你会看到 Cannot use import statement outside a module 的错误。为了解决这个错误，你可以使用上述两种方法之一，将这个代码片段放在一个 jest.config.js 文件中即可。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d013bde46428fe9eca1ff8