@H_404_4@

我正在开发一个运行良好的应用程序,但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]+[\s\S]*" 
                [(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();
  });
});

@H_404_4@

解决方法

就像您在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();
})

@H_404_4@ @H_404_4@

@H_404_4@