Jest console.error NG0303：无法绑定到"formGroup"，因为它不是'form'的已知属性

Question

我正在测试一个使用Jest和Angular 11的响应式组件。测试似乎运行正常，但当我运行测试时，此错误消息充斥控制台。这些错误不会在发球时出现，只会在测试时出现。(修改了一些文件名)

console.error NG0303: Can't bind to 'formGroup' since it isn't a known property of 'form'.
at logUnknownPropertyError (../packages/core/src/render3/instructions/shared.ts:1117:11)
at elementPropertyInternal (../packages/core/src/render3/instructions/shared.ts:999:9)
at ɵɵproperty (../packages/core/src/render3/instructions/property.ts:42:5)
at UnderTestComponent_Template (ng:/UnderTestComponent.js:308:9)
at executeTemplate (../packages/core/src/render3/instructions/shared.ts:511:5)
at refreshView (../packages/core/src/render3/instructions/shared.ts:369:7)
at refreshComponent (../packages/core/src/render3/instructions/shared.ts:1716:7)

我知道Jest在导入方面有一些问题，例如，我需要使用相对导入，否则Jest会崩溃。我不知道这是否有关系。

// Module for the component under test
@NgModule({
declarations: [UnderTestComponent],
imports: [
CommonModule,
SharedModule,
ReactiveFormsModule,
FormsModule,
// ...
],
exports: [UnderTestComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [TranslatePipe],
})
export class UnderTestModule{}

<!-- Component under test HTML snippet -->
<form novalidate (ngSubmit)="submitForm()" [formGroup]="formRoot">
<div id="exampleDiv" class="formMember">
<internal-input
formControlName="example"
type="text"
maxLength="10"
[allowedCharacterPattern]="numberRegex"
id="exampleId"
>
<internal-input-label for="exampleId">Example Number</internal-input-label>
<internal-message [error]="true" *ngIf="msgs.example">
Example Number {{ msgs.example }}
</internal-message>
</internal-input>
</div>
// ...
</form>

// Jest test snippet for the component under test
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UnderTestComponent} from './under-test.component';
import { ApiService } from '../../../services/api-service/api.service';
import { FormBuilder } from '@angular/forms';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
describe('UnderTestComponent', () => {
let component: UnderTestComponent;
let fixture: ComponentFixture<UnderTestComponent>;
const mockApiService = {
toDoMethod: jest.fn(),
};
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [UnderTestComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
FormBuilder,
{ provide: ApiService, useValue: mockApiService },
],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(UnderTestComponent);
component = fixture.componentInstance;
});
describe('form:', () => {
it.only('example too short', () => {
fixture.detectChanges();
let example = component.formRoot.get('example');
example.setValue('123456789');
expect(example.invalid).toBeTruthy();
});
});
}

错误不显示在某些测试中，例如:

it.only('ngOnInit should create a form with the correct structure', () => {
expect(component.formRoot).toBeUndefined();
component.ngOnInit();
expect(component.formRoot.get('example')).toBeTruthy();
expect(
component.formRoot.get('groupExample').get('groupMemberExample')
).toBeTruthy();
});

Answer 1

TestBed模块也需要导入FormsModule模块。所以在测试设置中，像这样扩展模块:

await TestBed.configureTestingModule({
...
imports: [FormsModule, ReactiveFormsModule, ...]
})