Angular testing with primeng : NullInjectorError: StaticInjectorError(DynamicTestModule)[ButtonDirective -> ElementRef
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) {}
我尝试了很多方法,但没有任何效果:'(
我试过了:
使用
模拟元素引用
- { 提供:ElementRef,useClass:MockElementRef },
- { 提供:ElementRef,useValue:MockElementRef },
- 在 tsconfig.json
的路径中添加 angular
- 添加"build":{
"preserveSymlinks":真
} 在 angular.json
这是我的 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 !!! :'(
*编辑:*
app.module.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 {
}
* 已解决:*
通过在 "test" 部分的 angular.json 中添加 "preserveSymlinks": true 而不是 "build" 部分有效...对我来说很愚蠢
已解决
我的angular.json的测试部分(添加"preserveSymlinks":正确):
"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
}
}
我正在尝试使用 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) {}
我尝试了很多方法,但没有任何效果:'(
我试过了:
使用
模拟元素引用- { 提供:ElementRef,useClass:MockElementRef },
- { 提供:ElementRef,useValue:MockElementRef },
- 在 tsconfig.json 的路径中添加 angular
- 添加"build":{ "preserveSymlinks":真 } 在 angular.json
这是我的 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 !!! :'(
*编辑:*
app.module.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 {
}
* 已解决:*
通过在 "test" 部分的 angular.json 中添加 "preserveSymlinks": true 而不是 "build" 部分有效...对我来说很愚蠢
已解决
我的angular.json的测试部分(添加"preserveSymlinks":正确):
"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
}
}