Angular with Jest - 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 line我的测试：

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",
    ],
)

jest配置文件：

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导入和深度导入所有的文件。

旧的例子：

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

新的示例：

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