带有Jest的Angular-TypeError：无法读取null的属性'ngModule'

Question

问题

我想为Angular应用程序设置Jest测试。因此，我遵循了jest-preset-angular的说明。但是，当我使用Bazel（this target）测试应用程序时，出现以下错误：

FAIL services/client/src/app/app.component.spec.ts
  ● AppComponent › should create the app

    TypeError: Cannot read property 'ngModule' of null

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

来自this的

行我的测试：

const fixture = TestBed.createComponent(AppComponent);

自己尝试

您可以这样自己尝试：

git clone https://github.com/flolu/cents-ideas
cd cents-ideas
git checkout 518ced3353083891a2707a322b9e7884034bcf44
yarn install
yarn client:test

详细信息

运行测试的Bazel目标：

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

最有趣的配置文件：

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

Answer 1

我遇到了确切的问题。最终成为桶进口的问题。要解决此问题，我必须删除所有的barrel导入并深度导入所有文件。

旧示例：

check

新示例：

select