angular - 带有 Jest 的 Angular - TypeError:无法读取 null 的属性“ngModule”
问题描述
问题
我想为我的 Angular 应用程序设置 Jest 测试。所以我按照jest-preset-angular的说明进行操作。但是当我用 Bazel (这个目标)测试应用程序时,我收到以下错误:
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)
这来自我的测试:
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/'],
};
解决方案
我有描述的确切问题。最终成为桶装进口的一个问题。为了解决这个问题,我必须删除所有桶导入并深度导入所有文件。
老例子:
import {
Example1,
Example2
} from 'path/to/example-folder';
新的例子:
import { Example1 } from 'path/to/example1-file';
import { Example2 } from 'path/to/example2-file';
推荐阅读
- function - 潜在增长模型:使用 semPaths 函数
- r - 在 tibble 中对数字进行计数、排序和过滤
- java - 等待列表的正确方法
> 表示所有操作都已完成 - windows - 有没有一种简单的方法可以通过命令提示符重命名多个文件(按照命名约定)?
- asp.net-core - 是否可以返回一个字典数组?
- python - Asyncio 异步运行一个函数
- flask - Flask Web 应用程序在 Heroku 中崩溃,在我的计算机服务器中很好
- java - Java 中如何在不使用 Arrays 类(例如,不排序)的情况下找到数组中出现频率最高的值?
- networking - 计算机如何知道本地网络上其他计算机的 IP 地址?
- angular - angular ionic app router 在 google chrome 捕获执行时暂停调试时抛出 NoMatch 错误