如何使用Jest优化类型记录StencilJS以支持ES6动态模块导入

Question

这里有许多类似的问题(.)，但是没有一个问题可以帮助我获得一个纯的模板配置。配置管理应该尽可能多地留给模具管理(.)

我的模板组件工作得很好，我几乎什么都试过了，但是需要导入d3-geo的Jest测试总是抛给我：

SyntaxError: Unexpected token 'export'

/app/node_modules/d3-geo/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export {default as geoArea} from "./area.js";
                                                                                             ^^^^^^

，我错过了什么？

我也许可以用Babel来完成这个任务，但这似乎很麻烦。我无法想象我们真的需要一个Babel预清洗才能得到ES6模块的支持。

应用程序的具体内容：

• Node@14.16.0 (来自码头-图像建设者/木偶技师)
• 模具@2.6.0
• Jest@26.6.3
• 打字本@4.4.2
• 导致错误的模块：d3-geo@3.0.1

我在package.json中有一个jest配置：

...
  "type": "module",
  "jest": {
    "testEnvironment": "jest-environment-node",
    "transform": {}
  },
  "main": "dist/index.cjs.js",
  "module": "dist/index.js",
  "es2015": "dist/index.cjs.js",
  "es2020": "dist/index.js",
...
  "scripts": {
    ...
    "test": "stencil test --spec --e2e",
    ...
...

而tsconfig包含：

...
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2020",
...

Answer 1

一个对我有用的解决方案是在stencil.config.ts中添加这个

您按照jest-preprocessor指定的方式使用文档，并且将作为ESM导出的模块排除在忽略模式之外，因此它也会在它们上这样做(最初尝试了babel-jest和ts-jest，但我在使用这些解决方案时遇到了其他问题)。

​

// Can simply extend the list if we ever consume more esModules.
const esModules = [
  // dependencies of esm packages
].join('|');

export const config: Config = {
  //...
  transform: {
      '^.+\\.(ts|tsx|js|jsx|css)$': "@stencil/core/testing/jest-preprocessor"
  },
  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
  //...
}

​

Answer 2

您是否尝试将"esModuleInterop": true添加到您的tsconfig.json中？(链接到TSConfig引用)