1. ホーム
  2. testing

[解決済み] angular2のテスト。ngModel' は 'input' の既知のプロパティではないので、バインドできない

2022-07-24 05:04:19

質問

私は、angular2 の双方向バインディングをテストしようとしています。 input . 以下はエラーです。

Can't bind to 'ngModel' since it isn't a known property of 'input'.

app.component.htmlは

<input id="name" type="text" [(ngModel)]="name" />
<div id="divName">{{name}}</div>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'  
})
export class AppComponent implements OnInit {
  name: string;    
}

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { AppService } from './app.service';
describe('App: Cli', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      providers:[AppService]
    });
  });

  it('divName', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let comp = fixture.componentInstance;
    comp.name = 'test';
    fixture.detectChanges();

    let compiled = fixture.debugElement.nativeElement;    
    expect(compiled.querySelector('divName').textContent).toContain('test');
  }));  
});

どのように解決するのですか?

をインポートする必要があります。 FormsModuleTestBed の設定に追加します。

import { FormsModule } from '@angular/forms';

TestBed.configureTestingModule({
  imports: [ FormsModule ],
  declarations: [
    AppComponent
  ],
  providers:[AppService]
});

でやっていることは TestBed でやっていることは、テスト環境のために NgModule をゼロから構成することです。これによって、テストに影響を与える可能性のある不要な外部変数を持たずに、テストに必要なものだけを追加することができます。