我想用spectator协助我进行单元测试,因为我已经阅读了很多有关它的内容。但是我不确定如何解决测试中的问题。在我的组件模板中,我有一个formGroup
像这样...
<form [formGroup]="emailReportForm" (ngSubmit)="emailReport()">
<!-- Lots more HTML here -->
</form>
并且在我的TS文件中,ngOnInit
/constructor
...中包含以下内容>
constructor(@Inject(MAT_DIALOG_DATA) data: any, private formBuilder: FormBuilder, private apiService: ApiService, public dialogRef: MatDialogRef<EmailReportComponent>) { this.data = data; } ngOnInit(): void { this.emailReportForm = this.formBuilder.group({ emailAddress: new FormControl(null, [ Validators.required, Validators.pattern('^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$') ]), updateOn: 'keyup' }); }
所以我需要模拟我的服务和导入,所以这是我的spec.ts文件...为了简化可读性,我减少了一些代码:
import { createComponentFactory, Spectator } from '#ng/node_modules/@ngneat/spectator/jest'; import { ApiService } from '#ng/src/app/common/services/api/api.service'; import { MAT_DIALOG_DATA, MatDialogRef } from '#ng/node_modules/@angular/material'; import { FormBuilder, FormControl, FormGroup, Validators,} from '#ng/node_modules/@angular/forms'; describe('EmailReportComponent', () => { let spectator: Spectator<EmailReportComponent>; const mockData = { }; const dialogMock = { close: () => { } }; const createComponent = createComponentFactory({ component: EmailReportComponent, imports: [ FormBuilder, FormControl, FormGroup, Validators, ], componentProviders: [ { provide: ApiService, useValue: { emailReport: jest.fn() } }, { provide: MAT_DIALOG_DATA, useValue: mockData }, { provide: MatDialogRef, useValue: dialogMock }, ], }); beforeEach(() => spectator = createComponent()); describe('Methods', () => { // tests go here });
[运行测试时,出现以下错误:
错误:模块导入了意外的值'FormBuilder''DynamicTestModule'。请添加@NgModule批注。
现在我可以使用
CUSTOM_ELEMENTS_SCHEMA
来防止该错误,但这似乎是错误的。谁能告诉我如何解决我的问题。
我想用旁观者协助我进行单元测试,因为我已经阅读了很多很棒的文章。但是我不确定如何解决测试中的问题。在我的组件模板中,我有一个...
您应该将ReactiveFormsModule放入导入中,如下所示: