Angular 中的单元测试，测试组件未定义

Question

我正在尝试在 Angular 6 中对“添加对象”（添加菜肴）组件进行单元测试。使用我当前的代码，我收到错误“无法读取未定义的属性 \'dishForm\'”。

\n\n

那么，似乎 DishAddComponent 没有被识别为要测试的组件？有人能帮我解决这个问题吗？提前致谢！

\n\n

我还尝试（除其他外）向 beforeEach 添加 async，如下所述：Angular 2 测试 - 组件实例未定义，但它不起作用。

\n\n

要进行单元测试的角度组件：

\n\n

export class DishAddComponent implements OnInit {\n  public dishForm: FormGroup;\n\n  constructor(private dishService: DishService,\n    private formBuilder: FormBuilder,\n    private router: Router) { }\n\n  ngOnInit() {\n    // define dishForm (with empty default values)\n    this.dishForm = this.formBuilder.group({\n      name: [\'\', [Validators.required, Validators.maxLength(30), Validators.pattern(\'[a-zA-Z :]*\')]],\n      country: [\'\'],\n      ingredients: this.formBuilder.array([]),\n      recipe: [\'\', [Validators.required, Validators.minLength(50)]],\n    }, { validator: CustomValidators.DishNameEqualsCountryValidator });\n  }\n\n  addIngredient(): void {\n    let ingredientsFormArray = this.dishForm.get(\'ingredients\') as FormArray;\n    ingredientsFormArray.push(IngredientSingleComponent.createIngredient());\n  }\n\n  addDish(): void {\n    if (this.dishForm.dirty && this.dishForm.valid) {\n\n      let dish = this.dishForm.value;\n\n      this.dishService.addDish(dish)\n        .subscribe(\n          () => {\n            this.router.navigateByUrl(\'/dishes\');\n          });\n    }\n  }\n}\n

\n\n

Jest 中的单元测试：

\n\n

describe(\'DishAddComponent\', () => {\n  let component: DishAddComponent;\n  let fixture: ComponentFixture<DishAddComponent>;\n  let formGroup: FormGroup;\n  let formBuilderMock: any;\n  let dishServiceMock: any;\n\n  beforeEach(() => {\n      formBuilderMock = {\n      group: jest.fn().mockName(\'formBuilderMock.group\'),\n      array: jest.fn().mockName(\'formBuilderMock.array\')\n    };\n\n    dishServiceMock = {\n      addDish: jest.fn().mockName(\'dishServiceMock.addDish\')\n    };\n\n    TestBed.configureTestingModule({\n      imports: [ ReactiveFormsModule, FormsModule, RouterTestingModule.withRoutes(routes)],\n      declarations: [ DishAddComponent, IngredientSingleComponent ],\n      providers: \n      [ \n        { provide: FormBuilder, useValue: formBuilderMock },\n        { provide: FormGroup, useValue: formGroup },\n        { provide: DishService, useValue: dishServiceMock }\n      ]\n    });\n    fixture = TestBed.createComponent(DishAddComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it(\'form invalid when empty\', () => {\n    (console).log(component);\n  expect(component.dishForm.valid).toBeFalsy();\n });\n});\n

\n\n

编辑： \n如果我使用下面的代码，我也会收到错误：

\n\n

DishAddComponent \xe2\x80\xba 应该创建

\n\n

期望（收到）.toBeTruthy()

\n\n

收到：未定义

\n\n

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

\n

Answer 1

尝试在configureTestingModule()之后添加compileComponents()来编译组件

TestBed.configureTestingModule({
  imports: [ ReactiveFormsModule, FormsModule, RouterTestingModule.withRoutes(routes)],
  declarations: [ DishAddComponent, IngredientSingleComponent ],
  providers: 
  [ 
    { provide: FormBuilder, useValue: formBuilderMock },
    { provide: FormGroup, useValue: formGroup },
    { provide: DishService, useValue: dishServiceMock }
  ]
})
  .compileComponents();