无法绑定到 formGroup，因为它不是“form”的已知属性

Question

我是 Angular 单元测试的新手。我正在尝试测试模态组件，但我不断收到以下错误： “无法绑定到 'formGroup'，因为它不是 'form' 的已知属性。”

我尝试将 FormGroup、FormBuilder、Validators 传递给测试提供程序（因为它们是我正在测试的代码中使用的东西，所以我一次添加了一个并一起添加），我还尝试添加 ReactiveFormsModule到它（与其他提供者和没有他们），但继续得到错误。

就像我说的那样，我是新手，所以要温柔。

组件：

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Benefit } from '../../models/benefit';
import { PolicyBase } from '../../models/policy-base';
import { DatePipe } from '@angular/common';
import { DataService } from '../../services/data-service/data-service';
import { Strings } from '../../models/strings';

@Component({
  selector: 'app-benefit-edit-modal',
  templateUrl: './benefit-edit-modal.component.html',
  styleUrls: ['./benefit-edit-modal.component.css']
})
export class BenefitEditModalComponent implements OnInit, OnChanges {

  @Input() policy: PolicyBase;
  @Input() mainForm: FormGroup;
  @Input() selectedBenefitToChange: Benefit;
  @Input() selectedBenefitToChangeIndex: number;

  headerText: string;
  private isAmountEditAvailable: boolean;

  constructor(private fb: FormBuilder,
      private dataService: DataService) { }

  ngOnInit() {
    this.mainForm.addControl('changeBenefitModalForm', this.fb.group({
      benefitType: [''],
      amount: [''],
      issueDate: [''],
      ceaseAge: ['']
    })) ;
  }

Component.Spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { FormGroup, FormBuilder, Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
import { AppRoutingModule } from 'src/app/app-routing.module';

import { BenefitMock } from '../../mock-components/mock-models.ts/benefit-mock';
import { Benefit } from '../../models/benefit';
import { PolicyBase } from '../../models/policy-base';
import { DataService } from '../../services/data-service/data-service';
import { Strings } from '../../models/strings';
import { BenefitEditModalComponent } from './benefit-edit-modal.component';
import { DataServiceHelper } from '../../services/data-service/data-service-helper';
import { AlertService } from '../../services/alert-service.service';
import {WindowRef} from '../../services/window-ref-service';
import { APP_BASE_HREF } from '@angular/common';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
        BenefitEditModalComponent
      ],
      imports: [
        HttpClientModule, 
        RouterTestingModule,
        Ng4LoadingSpinnerModule,
      ],
      providers: [
        DataService, 
        DataServiceHelper, 
        AlertService,
        FormGroup,
        FormBuilder,
        Validators,
        {provide: APP_BASE_HREF, useValue: '/inforceillustrations/'}, WindowRef
      ],
    })
    .compileComponents();
  }));

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

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

在 app.module.ts 中，我们导入 FormsModule 和 ReactiveFormsModule 并导出 ReactiveFormsModule...如果这有影响的话。

应用工作正常，这与单元测试隔离。

Answer 1

你必须在导入数组中导入ReactiveFormsModule：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
        BenefitEditModalComponent
      ],
      imports: [
        HttpClientModule, 
        RouterTestingModule,
        Ng4LoadingSpinnerModule,
        ReactiveFormsModule       // <---- this line
      ],
      providers: [
        DataService, 
        DataServiceHelper, 
        AlertService,
        FormGroup,
        FormBuilder,
        Validators,
        {provide: APP_BASE_HREF, useValue: '/inforceillustrations/'}, WindowRef
      ],
    })
    .compileComponents();
  }));