将 Jest 配置为 Angular 5

Question

我正在开发一个使用 Angular 5 的项目（我知道这是过时的），我按照这篇文章帮助在我的项目中设置 Jest，我的文件如下所示：

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>/'
  })
};

源代码/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"
  ]
}

在终端中运行jest后，控制台中打印出以下错误：

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

我知道上面链接的文章安装了最新版本的 Jest，所以我想知道是否可以通过降级 Jest 的版本和/或更改上述文件来在 Angular 5 配置 Jest； 或者除了从 Angular 5 升级之外没有其他解决方案？

Answer 1

我在 angular 5.2 中的一个项目中遇到了完全相同的问题，请尝试：

"jest": "^23.4.2",
"jest-preset-angular": "^5.2.3",

在您的 package.json 中：记得删除：

rm -rf node_modules/jest node_modules/jest-preset-angular

并再次执行：

npm i
npm run test

它解决了我的问题。