Menu
I am migrating our karma test to Jest in an old angular 9 application, and am facing an issue with a couple of tests failing with the following type of exception:
TypeError: Class constructor SomeComponentClass cannot be invoked without 'new'
I followed the Jest setup guides and have referred to some other independent guides and my setup is as follows:
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 (located in src folder)
{
"$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 (in root of project)
{
"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'
}
}
]
]
};
I also tried this in my babel config:
module.exports = {
presets: [
["@babel/preset-env", { "targets": "defaults" }]
]
};
I can't figure out how to get past this issue, it sounds like from what I have read in various places it's down to babel\tsconfig setup and how it transpiles es2015 classes (I think) but I just can't work it out.
Can some offer any clues as to what I may need to do to get past this type of error?
Thanks
793
In your tsconfig.json and tsconfig.app.json, change your target from es2015 to 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"
}
}
It will fix the error.
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
