I am working on a project that uses Angular 5 (archaic, I know) and I followed this article to help set up Jest in my project, and my files look like the following:
package.json
"dependencies": {
"@angular/animations": "^5.2.10"
"@angular/common": "^5.2.10",
"Gangular/compiler": "^5.2.10",
"@angular/core": "^5.2.10",
"@angular/forms": "^5.2.10",
"@angular/http": "^5.2.10",
"@angular/platform-browser":"^5.2.10",
"@angular/platform-browser-dynamic": "^5.2.10",
"@angular/router": "^5.2.10"
"@angular/service-worker": "^5.2.10",
"@briebug/jest-schematic": " 5.0.0",
"@ng-bootstrap/ng-bootstrap":"^1.0.0",
"@ngx-translate/core": "^9.0.1",
"@progress/kendo-angular-buttons": "4.3.3",
"@progress/kendo-angular-dateinputs": "^3.5.4",
"@progress/kendo-angular-dialog": "^3.7.0",
"@progress/kendo-angular-dropdowns": "3.5.1".
"@progress/kendo-angular-excel-export": "2.3.0"
"@progress/kendo-angular-grid": "^3.6.1",
"@progress/kendo-angular-inputs": "4.2.0"
"@progress/kendo-angular-intl": "1.7.0",
"@progress/kendo-angular-l10n": "1.3.0",
"@progress/kendo-angular-layout": "3.2.0",
"@progress/kendo-angular-menu": "^1.2.0",
"@progress/kendo-angular-tooltip": "1.1.2",
"@progress/kendo-angular-treeview": "^3.0.0",
"@progress/kendo-data-query": "1.5.0",
"@progress/kendo-drawing": "1.5.8",
"@progress/kendo-theme-default": "3.3.1",
"@tinymce/tinymce-angular": "1.0.9",
"@types/babel-types": "7.0.7",
"@types/file-saver": "^2.0.1",
"bootstrap": "4.0.0",
"core-js": "^2.5.2",
"event-target-shim":"^5.0.1",
"expose-loader": "10.7.5",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"guid-typescript": "^1.0.9",
"highlight.js": "9.14.2",
"increase-memory-limit":"^1.0.6",
"insert-text-at-cursor": "^0.1.1",
"install": "^0.12.1",
"jquery": "^3.3.1",
"lodash": "4.17.4",
"mdi": "^2.1.99",
"moment": "2.24.0",
"ms-signalr-client": "^2.2.7",
"ngx-toastr": "8.7.3",
"ngx-virtual-scroller": "^3.0.3",
"replace-in-file": "^6.1.0",
"roboto-fontface": "^0.9.0",
"rxjs": "5.5.12",
"tinymce": "^4.7.13",
"x1sx": "^0.16.8",
"zone.js": "^0.8.18"
}, "devDependencies":
"@angular/cli":"~1.6.5",
"@angular/compiler-cli":"^5.2.10",
"@angular/language-service": "^5.2.10",
"@biesbjerg/ngx-translate-extract": "^2.3.1",
"@ngx-rocket/scripts": "^2.0.0",
"@types/jest": "^29.2.4",
"@types/lodash": "4.14.144",
"@types/node":"8.0.10",
"codelyzer": "^4.1.0",
"htmlhint":"^0.9.13",
"https-proxy-agent": "^2.0.0",
"jasmine-core": "~2.9.1",
"jasmine-spec-reporter":"^4.1.0",
"jasmine-spec-reporter":"^4.1.0",
"jest": "^29.3.1",
"jest-preset-angular": "^12.2.3",
"karma": "~2.0.0",
"karma-chrome-Launcher": "^2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "^1.1.0",
"karma-junit-reporter": "^1.2.0",
"protractor": "~5.3.0",
"stylelint": "~8.4.0",
"stylelint-config-recommended-scss": "~3.0.0",
"stylelint-config-standard":"~18.0.0",
"stylelint-scss": " 2.2.0",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "^2.7.3",
"webpack-bundle-analyzer": "^3.8.0"
jest.config.js
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('./tsconfig');
module.exports = {
preset: 'jest-preset-angular',
roots: ['<rootDir>/src/'],
testMatch: ['**/+(*.)+(spec).+(ts)'],
setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
collectCoverage: true,
coverageReporters: ['html'],
coverageDirectory: 'coverage/my-app',
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
prefix: '<rootDir>/'
})
};
src/test.ts
import 'jest-preset-angular/setup-jest';
Object.defineProperty(window, 'CSS', {value: null});
Object.defineProperty(window, 'getComputedStyle', {
value: () => {
return {
display: 'none',
appearance: ['-webkit-appearance']
};
}
});
Object.defineProperty(document, 'doctype', {
value: '<!DOCTYPE html>'
});
Object.defineProperty(document.body.style, 'transform', {
value: () => {
return {
enumerable: true,
configurable: true
};
}
});
tsconfig.spec.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jest" // 1
],
"esModuleInterop": true,
"emitDecoratorMetadata": true
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
After running jest in the terminal, the below error is printed in the console:
FAIL src/app/app.component .spec.ts
• Test suite failed to run
TypeError: Cannot read property 'createNodeArray' of undefined at visitor (node_modules/ts-jest/dist/transformers/hoist-jest.js:84:61)
at Object.visitNode (node_modules/typescript/lib/typescript.js:56836:23)
at node_modules/ts-jest/dist/transformers/hoist-jest.js:96:23
at node_modules/typescript/lib/typescript.js:3067:86 at reduceLeft (node_modules/typescript/lib/typescript.js:2737:30)
at node_modules/typescript/lib/typescript.js:3067:42 at transformoot (node_modules/typescript/1ib/typescript.js:73479:82)
at Object.map (node_modules/typescript/lib/typescript.js:2025:29)
at Object.transformllodes (node_modules/typescript/lib/typescript.js:73466:30)
at emitisFileOrBundle (node modules/typescript/lib/typescript.js:74572:32)
emitSourcefileOrBundle(node_modules/typescript/lib/typescript.js:74545:13)
at forEachEmittedFile (node _modules/typescript/lib/typescript.js: 74454:30)
at Object.emitFiles (node_modules/typescript/lib/typescript.js:74535:9 at emitworker (node_modules/typescript/lib/typescript.js:79069:33)
at node_modules/typescript/lib/typescript.js:79029:66 at runwithCancellationToken(node_modules/typescript/lib/typescript.js:79120:24)
at Object.emit (node_modules/typescript/lib/typescript.js:79029:20)
at Object-getFileEmitoutput (node_modules/typescript/lib/typescript.js: 80362:34)
at Object.getEmitOutput (node_modules/typescript/lib/typescript.js:108054:23)
at NgJestCompiler.TsCompiler.getCompiledOutput(node_modules/ts-jest/dist/legacy/compiler/ts-compiler.js:135:48)
at NgJestTransformer.TsJestTransformer.processwithTs(node_modules/ts-jest/dist/legacy/ts-jest-transformer.js:232:37)
at NgJestTransformer.TsJestTransformer-process(node_modules/ts-jest/dist/legacy/ts-jest-transformer.js:161:24)
at ScriptTransformer.transformSource(node_modules/@jest/transform/build/ScriptTransformer.js:519:31)
at ScriptTransformer._transformAndBuildscript(node_modules/@jest/transform/build/ScriptTransformer.js:648:40)
at ScriptTransformer. transform (node_modules/@jest/transform/build/ScriptTransformer.js:700:19)
Test Suites: 1 failed, 1 total Tests:
o total
Snapshots:
0 total
Time:
13.38 s
I know that the article linked above installs Jest at the latest version, so I was wondering if it was possible to configure Jest at Angular 5 either by downgrading Jest's version and/or altering the files mentioned above; or is there no other solution than upgrading from Angular 5?
