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

798qvoo8 于 2023-11-15 发布在 Jest

关注(0)|答案(2)|浏览(145)

我正在将我们的karma测试迁移到一个旧的angular 9应用程序中的Jest，并且面临着一些测试失败的问题，异常类型如下：
TypeError：没有“new”就无法调用类构造函数SomeonentClass
我遵循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（位于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类（我认为），但我就是不能解决这个问题。
有人能提供任何线索，我可能需要做什么来克服这种类型的错误？
谢谢

jestjs

来源：https://stackoverflow.com/questions/49431072/jest-angular-9-class-constructor-somecomponentclass-cannot-be-invoked-withou

2条答案

按热度按时间

pbossiut1#

在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"
  }
}

字符串
它将修复错误。

赞(0）回复(0）举报 2023-11-15

v1l68za42#

我在快照测试中也遇到了同样的问题，将目标更改为es6也不起作用。我找到了一个解决方案，覆盖了这个类。

的数据