[英]NullInjectorError: StaticInjectorError(DynamicTestModule) When Testing in Angular 2
[英]Angular testing with primeng : NullInjectorError: StaticInjectorError(DynamicTestModule)[ButtonDirective -> ElementRef
我正在嘗試使用 primeng 測試我的 Angular 8 應用程序,但 karma 顯示以下錯誤:
NullInjectorError: StaticInjectorError(DynamicTestModule)[ButtonDirective -> ElementRef]: StaticInjectorError(Platform: core)[ButtonDirective -> ElementRef]: NullInjectorError: No provider for ElementRef!
我認為這是 primeng 按鈕組件的原因,確實在它的 github (primeng/src/app/components/button/button.ts) 上我們得到了:
export class ButtonDirective implements AfterViewInit, OnDestroy {
@Input() iconPos: 'left' | 'right' = 'left';
@Input() cornerStyleClass: string = 'ui-corner-all';
public _label: string;
public _icon: string;
public initialized: boolean;
constructor(public el: ElementRef) {}
我嘗試了很多東西,但沒有任何效果:'(
我試過:
通過使用模擬元素參考
這是我的 app.component.spec.ts:
import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import {BrowserModule} from "@angular/platform-browser";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
// Import PrimeNG modules
import {
/**
PRIMENG IMPORTS
**/
ButtonModule
} from "primeng/primeng";
import { } from 'jasmine'
import { ElementRef } from '@angular/core';
export class MockElementRef extends ElementRef {
constructor() { super(null); }
// nativeElement = {};
}
describe('AppComponent', () => {
let component: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let elRef: ElementRef;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
/**
LOTS OF MODULES
**/
ButtonModule,
],
declarations: [
/**
LOTS OF COMPONENTS
**/
],
providers: [
/**
LOTS OF SERVICES
**/
{ provide: ElementRef, useClass: MockElementRef },
// { provide: ElementRef, useValue: MockElementRef },
{ provide: APP_BASE_HREF, useValue: '/' },
{ provide: HTTP_INTERCEPTORS, useClass: HttpClientInterceptor, multi: true },
{ provide: HttpService, useFactory: httpClientCreator, deps: [HttpClient] }
]
}).compileComponents();
// elRef = TestBed.get(MockElementRef);
}));
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy()
});
});
幫我 pleeeeeeeeeeeease:!! :'(
*編輯: *
應用程序模塊.ts:
// Import PrimeNG modules
import {
CalendarModule,
CheckboxModule,
ContextMenuModule,
DialogModule,
DropdownModule,
GrowlModule,
InputTextareaModule,
PaginatorModule,
PanelModule, SpinnerModule,
TabViewModule, ToolbarModule, TooltipModule, KeyFilterModule, ButtonModule
} from "primeng/primeng";
import {TableModule} from "primeng/table";
/**
LOTS OF IMPORTS
**/
// Enable production mode
enableProdMode();
@NgModule({
imports: [
/**
LOTS OF MODULES
**/
],
declarations: [
AppComponent,
/**
LOTS OF COMPONENTS
**/
],
bootstrap: [
AppComponent
],
providers: [
/**
LOTS OF SERVICES
**/
{ provide: APP_BASE_HREF, useValue: '/' },
{ provide: HTTP_INTERCEPTORS, useClass: HttpClientInterceptor, multi: true },
{ provide: HttpService, useFactory: httpClientCreator, deps: [HttpClient] }
]
})
export class AppModule {
}
* 解決了: *
通過在“測試”部分而不是“構建”部分的 angular.json 中添加“preserveSymlinks”:true工作......對我來說非常愚蠢
解決了
我的 angular.json 的測試部分(添加了“preserveSymlinks”:true):
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/app/modules/dvy-report/dvy-crud/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/app/modules/dvy-report/dvy-crud/polyfills.ts",
"tsConfig": "src/app/modules/dvy-report/dvy-crud/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.css",
"src/sass/primeicons/primeicons.css",
"src/sass/font-awesome/font-awesome.css",
"src/sass/style.scss",
"node_modules/primeng/resources/primeng.css",
"src/app/modules/dvy-report/dvy-crud/app.component.css"
],
"assets": [
"src/favicon.ico"
],
"preserveSymlinks": true
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.