Jest - Angular 9 - 类构造函数 SomeComponentClass 不能在没有'new'的情况下被调用
Posted
技术标签:
【中文标题】Jest - Angular 9 - 类构造函数 SomeComponentClass 不能在没有\'new\'的情况下被调用【英文标题】：Jest - Angular 9 - Class constructor SomeComponentClass cannot be invoked without 'new'Jest - Angular 9 - 类构造函数 SomeComponentClass 不能在没有'new'的情况下被调用 【发布时间】：2018-09-01 00:47:55 【问题描述】：我正在一个旧的 Angular 9 应用程序中将我们的 karma 测试迁移到 Jest，并且面临几个测试失败的问题，并出现以下类型的异常：
TypeError: 类构造函数 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"
]
;
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 类（我认为），但我只是可以没办法。
能否提供一些线索，说明我可能需要做些什么才能克服此类错误？
谢谢
【问题讨论】：
【参考方案1】：在您的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"
它将修复错误。
【讨论】：
是的，没错。我几个月前跑到这个。 'es6' 更安全。 没有用吗？ @mindparse 我尝试更改为 es6，但没有任何区别，仍然出现相同的错误 您是否重新启动了 IDE 运行ngcc 并重建项目？
这次使用es5。 @mindparse以上是关于Jest - Angular 9 - 类构造函数 SomeComponentClass 不能在没有'new'的情况下被调用的主要内容，如果未能解决你的问题，请参考以下文章
更新到 Angular 10 后，如果没有“new”，就无法调用类构造函数 UpgradeComponent
在 Angular 9 中迁移到 Jest 会出现“未定义区域”错误
angular.js：Typescript 类构造函数“这是未定义的”