在angular中测试formbuilder时出错



我不知道为什么我得到"TypeError:无法读取属性'form'的未定义的错误";我尝试了各种方法来理解这个错误,但我做不到我尝试测试spects的新设置,但现在返回错误"无法读取未定义的属性'form'";:
规范。ts

import { NO_ERRORS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomValidationService } from 'src/app/core/services/custom-validation/custom-validation.service';
import { UserService } from 'src/app/core/services/user/user.service';
import {FormsModule} from '@angular/forms';
import { AccountComponent } from './account.component';
describe('AccountComponent', () => {
let accountComponent: AccountComponent;
let fb:FormBuilder;
let customValidator: CustomValidationService;
let userService: UserService;
let fixture: ComponentFixture<AccountComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AccountComponent],
imports: [FormBuilder, CustomValidationService, UserService],
providers:[FormBuilder]
}).compileComponents();
}))

it('',fakeAsync(()=>{
const testForm={
username:'test',
email: 'test@example.com'
};
accountComponent.form.controls['username'].setValue(testForm.username)
}))
});

我组件:

form: FormGroup;
formAlterPassword: FormGroup;  
constructor(private fb: FormBuilder) { 
this.form = this.fb.group({
username: ['', Validators.required],
email: ['', Validators.required]
});
this.formAlterPassword = this.fb.group({
currentPassword: ['', Validators.required],
password: ['', Validators.compose([Validators.required, Validators.minLength(12)])],
confirmPassword: ['', Validators.compose([Validators.required, Validators.minLength(12)])]      
})
}```

您的组件依赖于依赖注入来获得FormBuilder的实例,因此您必须为您的测试提供一个实例。试试这样写,

let fixture: ComponentFixture<AccountComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule],
schemas: [NO_ERRORS_SCHEMA]
});
fb = TestBed.inject<FormBuilder>(FormBuilder);
fixture = TestBed.createComponent(AccountComponent);
accountComponent = fixture.componentInstance;
fixture.detectChanges();
});

或者,看看这里的答案,你可以提供一些其他方式的FormBuilder,

Angular2 FormBuilder单元测试

你还必须创建一个AccountComponent的实例,然后才能访问它的属性。我把这段代码也加到了我原来的答案里。