Jest console.error NG0303:无法绑定到 'formGroup',因为它不是 'form' 的已知 属性
Jest console.error NG0303: Can't bind to 'formGroup' since it isn't a known property of 'form'
我正在用 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 在导入方面存在一些问题,f.e。我需要使用相对导入,否则 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();
});
TestBed
模块还需要导入FormsModule
。
所以在你的测试设置中像这样扩展模块:
await TestBed.configureTestingModule({
...
imports: [FormsModule, ReactiveFormsModule, ...]
})
我正在用 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 在导入方面存在一些问题,f.e。我需要使用相对导入,否则 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();
});
TestBed
模块还需要导入FormsModule
。
所以在你的测试设置中像这样扩展模块:
await TestBed.configureTestingModule({
...
imports: [FormsModule, ReactiveFormsModule, ...]
})