How to fix 'Error: No value accessor for form control with name' in Angular Unit Test?

Question

我无法测试使用带有 ngModel 的自定义组件的组件

HTML 代码如下所示（在下面的重现中查看更多信息）

<custom-control name="formCode" [(ngModel)]="testValue"></custom-control>

代码在我的应用程序中工作，但在我的测试中失败并出现以下错误

Uncaught Error: Uncaught (in promise): Error: No value accessor for form control with name: 'formCode'

Error: No value accessor for form control with name: 'formCode'

测试运行茉莉

我尝试了不同的导入，但 none 似乎解决了我的问题

复制代码在这里：https://stackblitz.com/edit/angular-test-ng-model

Answer 1

这是因为您在测试中模拟了 CustomControlComponent。在你的 package.json 中安装 @angular/material 及其依赖项并使用下面的规范文件。测试会通过。

https://stackblitz.com/edit/angular-test-ng-model-vsk5re

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, DefaultValueAccessor, ControlValueAccessor } from '@angular/forms';
// import { MockComponent } from 'ng2-mock-component';
import{MatFormFieldModule, MatInputModule} from '@angular/material';

import { ParentControlComponent } from './parent-control';
import {CustomControlComponent} from '../custom-control/custom-control';

describe('ParentControlComponent', () => {
    let component: ParentControlComponent;
    let fixture: ComponentFixture<ParentControlComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [
              CustomControlComponent,
              ParentControlComponent,
                // MockComponent({ selector: 'custom-control' }),
            ],
            imports: [
                BrowserAnimationsModule,
                FormsModule,
                ReactiveFormsModule,
                MatFormFieldModule,
                MatInputModule
            ],
            providers: [
            ]
        })
            .compileComponents();

        fixture = TestBed.createComponent(ParentControlComponent);

        component = fixture.componentInstance;

        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

Answer 2

就我而言，我使用的是自定义的 Angular 组件 (SingleSelectModule)，该组件未导入到单元测试文件中。我希望这可以帮助运行遇到与我相同问题的其他人：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { FormsModule } from '@angular/forms';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { CaselistComponent } from './caselist.component';
import { SingleSelectModule } from '@uimf/uitk/components/single-select';

describe('Component: CaselistComponent', () => {
  let component: CaselistComponent;
  let fixture: ComponentFixture<CaselistComponent>;

  beforeEach(async(() => {


    TestBed.configureTestingModule({
          declarations: [
            ...
          ],
          imports: [
            FormsModule,
            SingleSelectModule,
            RouterTestingModule,
            HttpClientTestingModule

          ],
          schemas: [CUSTOM_ELEMENTS_SCHEMA],

        }).compileComponents();

});

});

How to fix 'Error: No value accessor for form control with name' in Angular Unit Test?

How to fix 'Error: No value accessor for form control with name' in Angular Unit Test?

unit-testing

jasmine

karma-jasmine

angular-ngmodel

angular