Angular2没有将“exportAs”设置为“ngModel”Karma / Jasmine的
发布时间:2020-12-17 17:32:16 所属栏目:安全 来源:网络整理
导读:我正在开发一个运行良好的应用程序,但Jasmine测试会抛出模板错误.由于运行应用程序有效,模板引用变量可以绑定到ngModel,但为什么在运行测试时它不起作用?我正在使用“@ angular / forms”:“~2.2.3”, ERROR: 'Unhandled Promise rejection:','Template pa
我正在开发一个运行良好的应用程序,但Jasmine测试会抛出模板错误.由于运行应用程序有效,模板引用变量可以绑定到ngModel,但为什么在运行测试时它不起作用?我正在使用“@ angular / forms”:“~2.2.3”,
ERROR: 'Unhandled Promise rejection:','Template parse errors: There is no directive with "exportAs" set to "ngModel" ("d="name" required pattern="^[a-zA-Z]+[sS]*" [(ngModel)]="model.name" name="name" [ERROR ->]#name="ngModel" > </div> <div [hidden]="name.valid || name.pristine" 我的app.module.ts: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { LinearProgressIndicatorComponent } from './linear-progress-indicator/linear-progress-indicator.component'; import { MyNewDirectiveDirective } from './directives/my-new-directive.directive'; import { MyNewServiceDirective } from './services/my-new-service.directive'; import { HeaderComponent } from './components/header/header.component'; import { MenuComponent } from './components/menu/menu.component'; import { WatchpanelComponent } from './components/watchpanel/watchpanel.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { InputComponent } from './components/input/input.component'; import { LocalStorage } from './services/local-storage.service'; import { MaterialModule } from '@angular/material'; @NgModule({ declarations: [ AppComponent,LinearProgressIndicatorComponent,MyNewDirectiveDirective,MyNewServiceDirective,HeaderComponent,MenuComponent,WatchpanelComponent,InputComponent ],imports: [ BrowserModule,FormsModule,HttpModule,NgbModule.forRoot(),MaterialModule.forRoot(),],exports: [ MaterialModule ],providers: [LocalStorage],bootstrap: [AppComponent] }) export class AppModule { } input.component.spec.ts: import { async,ComponentFixture,TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { InputComponent } from './input.component'; describe('InputComponent',() => { let component: InputComponent; let fixture: ComponentFixture<InputComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ InputComponent ] }) .compileComponents(); fixture = TestBed.createComponent(InputComponent); component = fixture.componentInstance; fixture.detectChanges(); })); it('should create',() => { expect(component).toBeTruthy(); }); }); 解决方法
就像您在AppModule中所做的那样,您需要将FormsModule导入TestBed.configureTestingModule.您可以使用它来配置完全独立的模块以进行测试
TestBed.configureTestingModule({ imports: [ FormsModule ],declarations: [ InputComponent ] }) 还有一件事. TestBed.configureTestingModule({ ... }) .compileComponents(); fixture = TestBed.createComponent(InputComponent); 你不能这样做. .compileComponents异步解析,并返回一个promise.因此,您无法在编译之前尝试创建组件.你需要这样做 .compileComponents().then(() => { fixture = TestBed.createComponent(InputComponent); component = fixture.componentInstance; fixture.detectChanges(); }) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |