如何在自定义表单控件中模拟 ngControl - Angular 单元测试答案

【问题标题】：How to mock ngControl in Custom Form Control - Unit tests Angular如何在自定义表单控件中模拟 ngControl - Angular 单元测试
【发布时间】：2020-03-12 12:41:39
【问题描述】：

我正在寻找 Angular 9 中自定义表单控件的单元测试示例。那部分constructor(@Self() private ngControl: NgControl) 导致错误：Error: NodeInjector: NOT_FOUND [NgControl]。因为我需要以某种方式设置值访问器。

我在构造函数中注入ngControl，因为我需要稍后在我的组件中使用ngControl。这就是为什么我没有使用provide: NG_VALUE_ACCESSOR 的典型实现。

我试图通过以下方式模拟它：

beforeEach(async(() => {
    TestBed.configureTestingModule({
        providers: [
            { provide: NgControl, useValue: new FormControlDirective([], [], [], null) }
        ],
        imports: [FormsModule, ReactiveFormsModule]
    }).compileComponents();

但我有一个错误：No valid value accessor for form control with unspecified name attribute，因为我不知道函数FormControlDirective 的第三个参数下应该是什么，即：valueAccessors: ControlValueAccessor[]

有谁知道我该如何模拟这个？

【问题讨论】：

标签： angular typescript mocha.js angular-test

【解决方案1】：

尝试像这样模拟它：

let mockNgControl: any;

beforeEach(async(() => {
    mockNgControl = jasmine.createSpyObj('ngControl', ['value', /* mock other methods required here */]);
    TestBed.configureTestingModule({
        providers: [
            { provide: NgControl, useValue: mockNgControl }
        ],
        imports: [FormsModule, ReactiveFormsModule]
    }).compileComponents();

【讨论】：

【解决方案2】：

问题是因为我没有在 Imports 数组中使用 CustomFormControl 导入我的模块。这就是为什么它不起作用。也许它会帮助某人。

【讨论】：