Jest 迁移时令牌无效或意外

Question

我正在将我的项目从 Karma-Jasmine 迁移到 Jest。但我收到以下错误。看来我缺少一些配置。

错误指向 app.component.ts 文件中导入的服务的 constructor(@Inject('env') env: IEnvironment, 行。

错误如下

FAIL   aapA  apps/aapA/src/app/app.component.spec.ts
  ● Test suite failed to run

    D:\Development\NRWLProject\libs\shared\src\services\apiUrlProviderService.ts:19
      constructor(@(0, _core.Inject)('env')
                  ^

    SyntaxError: Invalid or unexpected token

       7 | 
       8 | import * as CommonStateConstants from '../../models/common-state.model';
    >  9 | import { navigationPath } from '../../services/apiUrlProviderService';
         | ^
      10 | 
      11 | import { UserDataService } from '../../services/user-data.service';
      12 | 

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1258:14)
      at Object.<anonymous> (libs/shared/src/containers/home/shell.component.ts:9:1)

====ApiUrlProviderService====

@Injectable()
export class ApiUrlProviderService {
  private appSetting: AppSetting;

  constructor(
    @Inject('env') env: IEnvironment,
    private apiConfigurationProvider: ApiConfigurationProvider
  ) {
    this.appSetting = new AppSetting(env.common.baseUrl);
  }

====JEST.CONFIG====

module.exports = {
  preset: 'jest-preset-angular',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\.(ts|html)$': 'ts-jest',
    '^.+\.js$': 'babel-jest'
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/(?!lodash-es/.*)'],
  collectCoverage: false,
  clearMocks: true,
  setupFilesAfterEnv: ['./test-setup.ts'],
  projects: [
    {
      displayName: 'appA',
      testMatch: [
        '<rootDir>/apps/aapA/src/app/**/*.spec.ts',
        '<rootDir>/libs/appA/**/src/lib/**/?(*.)(spec|test).{ts}'
      ]
    },
    {
      displayName: 'appB',
      testMatch: [
        '<rootDir>/apps/appB/src/app/**/*.spec.ts',
        '<rootDir>/libs/appB/**/src/lib/**/?(*.)(spec|test).{ts}'
      ]
    }
  ]
};

====BABEL.CONFIG====

module.exports = function(api) {
  api.cache(true);

  const presets = [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript'
  ];
  const plugins = [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    [
      'module-resolver',
      {
        root: ['.'],
        alias: {
          '@my-nrwl-project/shared': './libs/shared/src/index.ts'
        }
      }
    ],
    ['dynamic-import-node'],
    [
      '@babel/plugin-proposal-class-properties',
      {
        loose: true
      }
    ]
  ];
  const ignore = ['./node_modules'];

  return {
    presets,
    plugins,
    ignore
  };
};

===Package.json===

{
  "scripts": {
    ...
    "test": "jest --config=jest.config.js --passWithNoTests --verbose",
    ...
  },
  "dependencies": {
    "@angular-builders/custom-webpack": "8.4.1",
    "@angular/animations": "8.2.14",
    "@angular/cdk": "8.2.3",
    "@angular/common": "8.2.14",
    "@angular/compiler": "8.2.14",
    "@angular/core": "8.2.14",
    "@angular/flex-layout": "8.0.0-beta.27",
    "@angular/forms": "8.2.14",
    "@angular/material": "8.2.3",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "@angular/router": "8.2.14",
    "@ngrx/effects": "8.5.2",
    "@ngrx/entity": "8.5.2",
    "@ngrx/router-store": "8.5.2",
    "@ngrx/store": "8.5.2",
    "@nrwl/angular": "8.10.0",
    "@nrwl/nx": "7.8.7",
    "core-js": "3.6.1",
    "istanbul-lib-report": "3.0.0",
    "jquery": "3.4.1",
    "nyc": "13.3.0",
    "rxjs": "6.5.4",
    "tslib": "1.10.0",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-builders/jest": "^9.0.1",
    "@angular-devkit/build-angular": "0.803.23",
    "@angular-devkit/build-ng-packagr": "0.803.23",
    "@angular-devkit/schematics": "8.2.0",
    "@angular/cli": "8.3.20",
    "@angular/compiler-cli": "8.2.14",
    "@angular/language-service": "8.2.14",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-typescript": "^7.9.0",
    "@ngrx/store-devtools": "8.5.2",
    "@nrwl/jest": "8.8.2",
    "@nrwl/schematics": "8.10.0",
    "@nrwl/workspace": "8.10.0",
    "@types/jest": "^24.0.18",
    "@types/lodash": "4.14.123",
    "@types/lodash-es": "4.17.3",
    "@types/node": "12.12.17",
    "angular-testing-library": "0.0.2",
    "babel-jest": "^26.0.1",
    "babel-plugin-module-resolver": "^4.0.0",
    "chalk": "3.0.0",
    "codelyzer": "5.2.0",
    "cross-env": "6.0.3",
    "glob": "^7.1.6",
    "gulp": "4.0.2",
    "gulp-inline-source": "4.0.0",
    "gulp-typescript": "6.0.0-alpha.1",
    "jest": "^25.4.0",
    "jest-cli": "^25.4.0",
    "jest-createspyobj": "^1.2.2",
    "jest-preset-angular": "7.1.1",
    "jest-webpack-resolver": "^0.3.0",
    "jest-zone-patch": "0.0.10",
    "json-server": "0.15.1",
    "karma-junit-reporter": "2.0.1",
    "mini-css-extract-plugin": "0.8.0",
    "node-sass": "4.13.1",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "rxjs-tslint": "0.1.7",
    "ts-jest": "^25.4.0",
    "ts-node": "8.5.4",
    "tsconfig-paths-webpack-plugin": "^3.2.0",
    "tslint": "5.20.1",
    "typescript": "^3.5.3",
  },
}

如果您需要更多信息，请告诉我。

提前致谢。

Answer 1

在 babel.config 中添加这些插件解决了我的问题

    'transform-class-properties',
    'babel-plugin-parameter-decorator'

Jest 迁移时令牌无效或意外

Invalid or unexpected token while Jest migration

jestjs

babel-jest

angular

nrwl-nx

angular-jest