Jest - Angular 9 - 类构造函数SomeComponentClass不能在没有'new'的情况下被调用

Question

Jest - Angular 9 - 类构造函数SomeComponentClass不能在没有'new'的情况下被调用

angularjestjsts-jestbabel-jestts-node

5

我正在将旧的 Angular 9 应用中的 Karma 测试迁移到 Jest，并且遇到了几个测试失败的问题，异常类型如下：

TypeError: Class constructor SomeComponentClass cannot be invoked without 'new'

我按照 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"
    ]
  };

test-setup.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 (located in src folder)

{
  "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\tconfig设置和如何转换es2015类（我想是这个原因），但我无法解决它。

有人能提供一些线索，告诉我需要做什么才能解决此类错误吗？

谢谢

- mindparse

2个回答

0

我在快照测试中也遇到了同样的问题，将目标更改为es6也没有起作用。我找到了一个解决方法并重写了这个类。

- Wahap

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mahdi Zarei · Accepted Answer

在您的tsconfig.json和tsconfig.app.json中，将target从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"
  }
}

它将修复该错误。