web-dev-qa-db-ja.com

「exportAs」が「ngForm」に設定されたディレクティブはありません

LoginComponentをテストしようとすると、以下のエラーが発生しました

PhantomJS 2.1.1 (Linux 0.0.0): Executed 3 of 55 (1 FAILED) (0 secs / 0.307 secs)
PhantomJS 2.1.1 (Linux 0.0.0) LoginComponent should create FAILED
Failed: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("iv class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
          <form (ngSubmit)="login(f)" [ERROR ->]#f="ngForm">
            <div class="card card-login">
              <div class="card-header text-cen"): LoginComponent@5:38

私のコンポーネントがどのように見えるか、

login.component.ts

export class LoginComponent {

  isBusy: boolean = false;
  user: User;

  constructor(
    private router: Router,
    private notificationService: NotificationService,
    private authService: AuthenticationService,
    private sessionService: SessionService,
  ) { }
  ....
}

そして、対応するスペックは次のようになります、

login.component.spec.ts

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  beforeEach(async(() => {
    let routerStub = new RouterStub();

    TestBed.configureTestingModule({
      imports: [HttpModule],
      declarations: [,
        LoginComponent
      ],
      providers: [{
        provide: Http, useFactory: (backend, options) => {
          return new Http(backend, options);
        },
        deps: [MockBackend, BaseRequestOptions]
      },
      { provide: Router, useClass: class { navigate = jasmine.createSpy("navigate"); } },
        MockBackend,
        BaseRequestOptions,
        AuthenticationService,
        SessionService,
        NotificationService
      ],
      schemas: [NO_ERRORS_SCHEMA],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

上記のプロバイダー、宣言などを使用して偽のコンポーネントを作成できないようです。 他の人が言ったように 、@NgModuleにFormsModuleをすでに含めていますデコレータ。

javascriptunit-testingangulartypescriptjasmine
11
Avinash Raj

わからない@NgModuleデコレータを追加しましたが、追加する必要があると思います

 TestBed.configureTestingModule({
      imports: [HttpModule, FormsModule],
21
Günter Zöchbauer