Angular with Jest - TypeError：无法读取 null 的属性“ngModule”

Question

问题

\n\n

我想为我的 Angular 应用程序设置 Jest 测试。所以我按照jest-preset-angular 的说明进行操作。但是当我使用 Bazel （此目标）测试应用程序时，出现以下错误：

\n\n

FAIL services/client/src/app/app.component.spec.ts\n  \xe2\x97\x8f AppComponent \xe2\x80\xba should create the app\n\n    TypeError: Cannot read property \'ngModule\' of null\n\n      at isModuleWithProviders (../packages/core/src/render3/jit/module.ts:530:37)\n      at expandModuleWithProviders (../packages/core/src/render3/jit/module.ts:523:7)\n          at Array.map (<anonymous>)\n      at Function.get (../packages/core/src/render3/jit/module.ts:124:29)\n      at getNgModuleDef (../packages/core/src/render3/definition.ts:761:27)\n      at verifySemanticsOfNgModuleDef (../packages/core/src/render3/jit/module.ts:183:19)\n      at Function.get (../packages/core/src/render3/jit/module.ts:147:22)\n      at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.applyProviderOverridesToModule (../../packages/core/testing/src/r3_test_bed_compiler.ts:398:49)\n      at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.compileTestModule (../../packages/core/testing/src/r3_test_bed_compiler.ts:622:10)\n      at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.finalize (../../packages/core/testing/src/r3_test_bed_compiler.ts:243:10)\n      at TestBedRender3.get [as testModuleRef] (../../packages/core/testing/src/r3_test_bed.ts:371:43)\n      at TestBedRender3.Object.<anonymous>.TestBedRender3.inject (../../packages/core/testing/src/r3_test_bed.ts:270:25)\n      at TestBedRender3.Object.<anonymous>.TestBedRender3.createComponent (../../packages/core/testing/src/r3_test_bed.ts:326:40)\n      at Function.Object.<anonymous>.TestBedRender3.createComponent (../../packages/core/testing/src/r3_test_bed.ts:176:33)\n      at services/client/src/app/app.component.spec.ts:14:29\n      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../npm/node_modules/zone.js/dist/zone.js:386:30)\n      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../npm/node_modules/zone.js/dist/proxy.js:117:43)\n      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../npm/node_modules/zone.js/dist/zone.js:385:36)\n      at Zone.Object.<anonymous>.Zone.run (../npm/node_modules/zone.js/dist/zone.js:143:47)\n

\n\n

这来自我的测试这一行：

\n\n

const fixture = TestBed.createComponent(AppComponent);\n

\n\n

自己尝试一下

\n\n

你可以自己尝试一下，如下所示：

\n\n

git clone https://github.com/flolu/cents-ideas\ncd cents-ideas\ngit checkout 518ced3353083891a2707a322b9e7884034bcf44\nyarn install\nyarn client:test\n

\n\n

细节

\n\n

运行测试的 Bazel 目标：

\n\n

jest_test(\n    name = "test",\n    srcs = glob(include = [\n        "**/*.ts",\n        "tsconfig.json",\n        "tsconfig.spec.json",\n    ]) + ["//services/client/src:src_fies"],\n    jest_config = "//:jest.angular.config.js",\n    deps = [\n        "//:package.json",\n        "//packages/enums:lib",\n        "@npm//@angular/core",\n        "@npm//@angular/router",\n        "@npm//@types/jest",\n        "@npm//date-fns",\n        "@npm//jest-preset-angular",\n        "@npm//ts-jest",\n        "@npm//typescript",\n    ],\n)\n

\n\n

笑话配置文件：

\n\n

module.exports = {\n  globals: {\n    \'ts-jest\': {\n      packageJson: \'<rootDir>/package.json\',\n      tsConfig: \'<rootDir>/services/client/tsconfig.spec.json\',\n      stringifyContentPathRegex: \'\\\\.html$\',\n      astTransformers: [\n        \'jest-preset-angular/build/InlineFilesTransformer\',\n        \'jest-preset-angular/build/StripStylesTransformer\',\n      ],\n    },\n  },\n  transform: {\n    \'^.+\\\\.(ts|js|html)$\': \'ts-jest\',\n  },\n  moduleFileExtensions: [\'ts\', \'html\', \'js\', \'json\'],\n  moduleNameMapper: {\n    \'^src/(.*)$\': \'<rootDir>/services/client/src/$1\',\n    \'^app/(.*)$\': \'<rootDir>/services/client/src/app/$1\',\n    \'^assets/(.*)$\': \'<rootDir>/services/client/src/assets/$1\',\n    \'^environments/(.*)$\': \'<rootDir>/src/environments/$1\',\n    \'^@cents-ideas/utils(.*)$\': \'<rootDir>/packages/utils$1\',\n    \'^@cents-ideas/event-sourcing(.*)$\': \'<rootDir>/packages/event-sourcing$1\',\n    \'^@cents-ideas/enums(.*)$\': \'<rootDir>/packages/enums$1\',\n    \'^@cents-ideas/models(.*)$\': \'<rootDir>/packages/models$1\',\n  },\n  transformIgnorePatterns: [\'node_modules/(?!@ngrx)\'],\n  snapshotSerializers: [\n    \'jest-preset-angular/build/AngularSnapshotSerializer.js\',\n    \'jest-preset-angular/build/HTMLCommentSerializer.js\',\n  ],\n  preset: \'jest-preset-angular\',\n  setupFilesAfterEnv: [\n    //\'jest-preset-angular\',\n    \'<rootDir>/services/client/src/setupJest.ts\',\n  ],\n  modulePathIgnorePatterns: [\'/node_modules/\', \'/services/frontend/\'],\n};\n

\n

Answer 1

我已经描述了确切的问题。这最终成为桶进口的问题。为了解决这个问题，我必须删除所有桶导入并深度导入所有文件。

旧的例子：

import {
  Example1,
  Example2
} from 'path/to/example-folder';

新的例子：

import { Example1 } from 'path/to/example1-file';
import { Example2 } from 'path/to/example2-file';