5

我正在将我们的 karma 测试迁移到旧 Angular 9 应用程序中的 Jest，并且面临几个测试失败的问题，并出现以下类型的异常：

TypeError：没有'new'就不能调用类构造函数SomeComponentClass

我遵循了 Jest 设置指南并参考了其他一些独立指南，我的设置如下：

jest.config.js

module.exports = {
    preset: "jest-preset-angular",
    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
    globals: {
      'ts-jest': {
        tsconfig: '<rootDir>/src/tsconfig.spec.json',
        stringifyContentPathRegex: '\\.(html|svg)$',
      },
    },
    coverageDirectory: 'coverage',
    coverageReporters: ["html", "text-summary", "json-summary", "cobertura"],
    transform: {
        '^.+\\.(ts|js|html)$': 'jest-preset-angular',
    },
    snapshotSerializers: [
      'jest-preset-angular/build/serializers/no-ng-attributes',
      'jest-preset-angular/build/serializers/ng-snapshot',
      'jest-preset-angular/build/serializers/html-comment',
    ],
    testEnvironment: "jsdom",
    transformIgnorePatterns: [
        "node_modules/(?!@o3|@al|ui-metadata)"
    ],
    testPathIgnorePatterns: [
        "<rootDir>/node_modules/",
        "<rootDir>/dist/",
        "<rootDir>/cypress/",
        "<rootDir>/src/test.ts/"
    ],
    reporters: [ "default" ],
    testMatch: [
        "<rootDir>/src/exposures/**/*.spec.ts"
    ]
  };

测试设置.ts

import 'jest-preset-angular/setup-jest';
import '@angular/localize/init';
Object.defineProperty(window, 'CSS', { value: null });
Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>',
});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance'],
    };
  },
});
/**
 * ISSUE: https://github.com/angular/material2/issues/7101
 * Workaround for JSDOM missing transform property
 */
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});

tsconfig.spec.js（位于 src 文件夹中）

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest", "node"],
    "esModuleInterop": true,
    "target": "es2015"
  },
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

tsconfig.json（位于 src 文件夹中）

{
  "$schema":         "http://json.schemastore.org/tsconfig",
  "extends":         "../tsconfig.json",
  "compilerOptions": {
    "paths": {
      "@o3/exposures": [
        "./exposures"
      ],
      "ui-metadata/*": [
        "./../node_modules/ui-metadata"
      ]
    },
    "baseUrl": "."
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "./**/*.d.ts",
    "../node_modules/@o3/**/*.ts",
    "../node_modules/ui-metadata/**/*.ts"
  ],
  "exclude": [
    "test.ts",
    "common.testing.ts",
    "**/*.spec.ts",
    "../node_modules/@o3/core/e2e/*",
    "../node_modules/@o3/design/e2e/*",
    "../node_modules/@al/ng-navigation-components/e2e",
    "../node_modules/@o3/core/testing",
    "../node_modules/@o3/core/src/test.ts",
    "../node_modules/@o3/auth/src/test.ts",
    "../node_modules/@o3/design/src/test.ts",
    "../node_modules/@o3/auth/src/test.ts",
    "../node_modules/@al/ng-navigation-components/src/test.ts",
    "../node_modules/@o3/core/src/typings.d.ts",
    "../node_modules/ui-metadata/test/**/*.ts",
    "../node_modules/@o3/**/*.spec.ts",
    "../node_modules/@o3/dev-tools/**/*.ts"
  ]
}

tsconfig.json（在项目的根目录中）

{
  "compileOnSave": false,
  "compilerOptions": {
    "declaration": false,
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": [
      "es2018",
      "dom"
    ],
    "mapRoot": "./",
    "module": "esnext",
    "moduleResolution": "node",
    "outDir": "../dist",
    "sourceMap": true,
    "target": "es2015"
  }
}

babel.config.js

module.exports = {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ]
    ]
  };

我也在我的 babel 配置中尝试了这个：

module.exports = {
    presets: [
       ["@babel/preset-env", { "targets": "defaults" }]
    ]
  };

我不知道如何解决这个问题，从我在各个地方读到的内容来看，这听起来像是babel\tsconfig设置以及它如何转换es2015类（我认为），但我就是无法解决。

有些人可以提供任何线索，说明我可能需要做些什么来克服这种类型的错误？

谢谢

4

1 回答 1

4

在您的tsconfig.jsonandtsconfig.app.json中，将您的targetfrom更改es2015为es5。

{
  "compileOnSave": false,
  "compilerOptions": {
    "declaration": false,
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": [
      "es2018",
      "dom"
    ],
    "mapRoot": "./",
    "module": "esnext",
    "moduleResolution": "node",
    "outDir": "../dist",
    "sourceMap": true,
    "target": "es5"
  }
}

它将修复错误。

于 2021-10-16T08:29:55.773 回答