笑话：SyntaxError: Unexpected token \'export\' 发生在 tslib.es6.js答案

【问题标题】：Jest: SyntaxError: Unexpected token 'export' happens at tslib.es6.js笑话：SyntaxError: Unexpected token \'export\' 发生在 tslib.es6.js
【发布时间】：2022-10-07 20:24:24
【问题描述】：

我收到此错误：

C:\Users\myname\Projects\ConfigEditor\MesConfiguration.WebClient\node_modules\tslib\tslib.es6.js:24
    export function __extends(d, b) {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

我的 jest-esm.config.mjs 看起来像这样

const jestConfig = {
  preset: 'jest-preset-angular/presets/defaults-esm',
  extensionsToTreatAsEsm: ['.ts'],
  globals: {
    'ts-jest': {
      useESM: true,
      stringifyContentPathRegex: '\\.(html|svg)$',
      tsconfig: '<rootDir>/tsconfig-esm.spec.json',
    },
  },
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
  resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
  transform: {
    '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
  },
  globalSetup: 'jest-preset-angular/global-setup',
  moduleNameMapper: {
    //tslib: 'tslib/tslib.mjs',
    tslib: 'tslib/tslib.es6.js',
    "@shared/(.*)": "<rootDir>/src/app/shared/$1",
    "@editors/(.*)": "<rootDir>/src/app/editors/$1",
    "@dashboard/(.*)": "<rootDir>/src/app/dashboard/$1",
    "@env": "<rootDir>/src/environments/environment",
  },
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
}

export default jestConfig;

package.json 有

"type": "module",

我开始测试

"test-esm": "node --experimental-vm-modules --no-warnings node_modules/jest/bin/jest.js -c=jest-esm.config.mjs --no-cache",

有什么问题？

将 tslib.es6.js 重命名为 tslib.mjs 后，错误消失了，但这不是解决方案。它应该在任何yarn install 之后工作

【问题讨论】：

标签： jestjs es6-modules angular13

【解决方案1】：

错误消失了，因为您已设置

transformIgnorePatterns: ['node_modules/(?!.*\.mjs$)']

您基本上使用的是预设jest-preset-angular/presets/defaults-esm 所以您在配置中输入的大多数属性都是多余的

一件事是 transformIgnorePatterns 不知何故不适用于该数组中的多个项目（在某些情况下），因此最好像我的情况一样一次放置所有内容

transformIgnorePatterns: ['node_modules/(?!rxjs|tslib)']

这是我完整的jest.config.js 和setup-jest.ts 文件，我在Angular14 中使用ESM 执行node --experimental-vm-modules node_modules/jest/bin/jest.js

// jest-config.ts
module.exports = {
  preset: 'jest-preset-angular/presets/defaults-esm',
  testRegex: '.*spec.ts$',
  transformIgnorePatterns: [
    'node_modules/(?!rxjs|tslib)'
  ],
  moduleNameMapper: {
    "^dnd-core$": "dnd-core/dist",
    "^react-dnd$": "react-dnd/dist",
    "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist",
    "^react-dnd-touch-backend$": "react-dnd-touch-backend/dist",
    "^react-dnd-test-backend$": "react-dnd-test-backend/dist",
    "^react-dnd-test-utils$": "react-dnd-test-utils/dist"
  },
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

// setup-jest.ts
import 'jest-preset-angular/setup-jest.mjs';

Object.defineProperty(window, "getComputedStyle", {
    value: () => ["-webkit-appearance"]
});

【讨论】：