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

Question

我很难让 jest 与使用 ES 模块和import语法的打字稿项目一起工作。\n我的项目最初是为 commonjs 编写的，jest 测试运行良好。但后来我决定切换到 ES 模块（出于学习目的），玩笑不高兴 \xe3\x83\xbd(`\xd0\x94\xc2\xb4)\xef\xbe\x89\n我正在使用的工具：打字稿、玩笑、ts-玩笑

\n

问题从import语法开始。

\n

以下是我尝试过的代码。

\n

//  projectRoot/src/app.ts\n\nexport default someFunction = (): void => {\n   // some code\n}\n

\n

如果

\n

// projectRoot/__tests__/app.test.ts\n\nimport someFunction from \'../src/app\';   // without file extension\n\n/* This execute perfectly fine */\n

\n

但

\n

// projectRoot/__tests__/app.test.ts\n\nimport someFunction from \'../src/app.ts\'   // with .ts\n\n/*\n\xe2\x97\x8f Test suite failed to run\n\n   __tests__/app.test.ts:1:25 - error TS2691: An import path cannot end with a \'.ts\' extension. Consider importing \'../src/app\' instead.\n\n    1 import information from \'../src/app.ts\';\n*/\n

\n

和

\n

// projectRoot/__tests__/app.test.ts\n\nimport someFunction from \'../src/app.js\';   // with .js\n\n/*\n\xe2\x97\x8f Test suite failed to run\n\n    Cannot find module \'../src/app.js\' from \'__tests__/app.test.ts\'\n*/\n

\n

如上面的示例，如果我导入带有扩展名的模块（这是 ES 模块必须的），jest（或者可能是 ts-jest？）会不高兴。\n我在网上做了一些搜索，但似乎 jest 文档不太支持ES 模块。通过阅读这篇文章，ts-jest 也是如此

\n

我的项目结构：

\n

/projectRoot\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 /src/app.ts\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 /__tests__/app.test.ts\n

\n

package.json 文件里面有值"type": "module"

\n

tsconfig.json：

\n

{\n  "compilerOptions": {\n     "target": "ES2015",\n     "module": "ESNEXT",\n     "outDir": "./build",\n     "strict": true,\n     "moduleResolution": "node",\n     "esModuleInterop": true,\n     "skipLibCheck": true,\n     "forceConsistentCasingInFileNames": true\n  },\n  "include": ["./src"],\n  "exclude": ["node_modules", "**/*.test.ts"]\n}\n

\n

笑话配置.js

\n

export default {\n    "roots": [\n      //"<rootDir>/src"\n      "<rootDir>"\n    ],\n    "testMatch": [\n      "**/__tests__/**/*.+(ts|tsx|js)",\n      "**/?(*.)+(spec|test).+(ts|tsx|js)"\n    ],\n    "transform": {\n      "^.+\\\\.(ts|tsx)$": "ts-jest"\n    },\n    "preset": "ts-jest",\n    "testEnvironment": \'node\'\n  }\n

\n

请帮忙。谢谢。

\n

Answer 1

通过下面的导入

// projectRoot/__tests__/app.test.ts

import someFunction from '../src/app.js';   // with .js

ts-jest 可以配置为通过以下配置来使用它。在jest.config.js文件中，添加以下内容：

module.exports = {
  //... // your previous configurations
  extensionsToTreatAsEsm: ['.ts'],
  globals: {
    'ts-jest': {
      //... // your other configurations here
      useESM: true,
    },
  },
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1',
  }

此配置的来源可以在 ts-jest 的文档页面上找到：ESM-Support

我的一些示例代码如下：

// components_ts.ts
export add(x: number, y: number): number {
    return x + y;
}

// render_ts.ts
import * as ComponentsTS from './components_ts.js'; // <-- Extension is JS

export function addedNumbers(): number {
    let addedNumbers: number = ComponentsTS.add(1, 2);
    return addedNumbers;
}

// render_ts.test.ts
import * as RenderTS from '../ts_files/render_ts';

it ('Test addNumbers function', () => {
    expect(RenderTS.addedNumbers()).toBe(3);
});

运行这个npm jest