我们使用的是带有Angular 9的Storybook 5，一些测试使用的是Jest 26。
问题是，当我们使用Typescript<3.8.0——Angular 9显然需要ng build --prod——我们得到了一堆Jest类型的错误，看起来像这样：
node_modules/@types/jest/node_modules/pretty-format/build/index.d.ts:7:36 - error TS1005: ';' expected.
当我们升级到Typescript 3.8.3时，类型可以工作，但Angular不能再为prod构建了，因为它需要更低的Typescript版本。
有人知道如何处理这个问题吗？
依赖项：
"dependencies": {
"@angular/animations": "~9.0.3",
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.0.3",
"@angular/compiler": "~9.0.3",
"@angular/core": "~9.0.3",
"@angular/forms": "~9.0.3",
"@angular/material": "^10.0.1",
"@angular/platform-browser": "~9.0.3",
"@angular/platform-browser-dynamic": "~9.0.3",
"@angular/router": "~9.0.3",
"rxjs": "~6.5.4",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.7",
"@angular-devkit/build-ng-packagr": "~0.900.7",
"@angular/cli": "^9.0.7",
"@angular/compiler-cli": "~9.0.3",
"@angular/language-service": "~9.0.3",
"@babel/core": "^7.10.3",
"@babel/preset-env": "^7.10.3",
"@babel/preset-typescript": "^7.10.1",
"@storybook/addon-a11y": "^5.3.19",
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addon-notes": "^5.3.19",
"@storybook/addon-docs": "^5.3.19",
"@storybook/addon-jest": "^5.3.19",
"@storybook/addon-knobs": "^5.3.19",
"@storybook/addon-storysource": "^5.3.19",
"@storybook/addon-viewport": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/angular": "^5.3.19",
"@storybook/storybook-deployer": "^2.8.6",
"@testing-library/angular": "^9.4.0",
"@testing-library/jest-dom": "^5.10.1",
"@types/jasmine": "^3.5.11",
"@types/jest": "^26.0.18",
"@types/node": "^11.15.39",
"@zeplin/cli": "^1.0.3",
"@zeplin/cli-connect-angular-plugin": "^0.1.4",
"@zeplin/cli-connect-storybook-plugin": "^0.3.0",
"babel-loader": "^8.1.0",
"codelyzer": "^5.1.2",
"cpx": "^1.5.0",
"jasmine": "^3.6.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"jest": "^26.1.0",
"jest-image-snapshot": "^4.0.2",
"jest-preset-angular": "^7.1.1",
"jest-puppeteer": "^4.4.0",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"ng-packagr": "^9.0.0",
"protractor": "~5.4.3",
"puppeteer": "^4.0.1",
"scss-bundle": "^3.1.2",
"start-server-and-test": "^1.11.0",
"ts-node": "~8.3.0",
"tslib": "^1.10.0",
"tslint": "~5.18.0",
"typescript": "3.8.3",
"jest-diff": "25.1.0",
"pretty-format": "25.1.0"
},
"jest": {
"verbose": true,
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"<rootDir>/projects/ng-custom-lib/src/jest-config/setup.ts"
],
"transformIgnorePatterns": [
"node_modules/(?!@storybook/*)"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/dist/",
"<rootDir>/storybook-static/",
"<rootDir>/projects/ng-custom-lib/src/test.ts"
],
"coveragePathIgnorePatterns": [
"/jest-config/",
"/node_modules/"
],
"snapshotSerializers": [
"<rootDir>/node_modules/jest-preset-angular/AngularSnapshotSerializer.js",
"<rootDir>/node_modules/jest-preset-angular/HTMLCommentSerializer.js"
],
"globals": {
"ts-jest": {
"tsConfig": "<rootDir>/tsconfig.spec.json",
"stringifyContentPathRegex": "\.html$",
"diagnostics": false,
"isolatedModules": true,
"astTransformers": [
"<rootDir>/node_modules/jest-preset-angular/InlineHtmlStripStylesTransformer"
]
}
},
"moduleNameMapper": {
"\.(css|less)$": "<rootDir>/projects/ng-custom-lib/src/jest-config/styleMock.js",
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/projects/ng-custom-lib/src/jest-config/fileMock.js"
},
"transform": {
"^.+\.(ts|html)$": "ts-jest",
"^.+\.js$": "babel-jest"
},
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node",
".html"
]
}
事实证明，我能够通过将Angular从9.0更新到9.1来规避这个问题，因为9.1使用Typescript版本3.8.3。执行更新后，测试和构建都按预期进行。