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

Question

I fail to test a component that uses a custom component with ngModel

HTML code looks like this (see more in the repro below)

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

The code is working in my app but it fails in my test with the following error

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'

The tests are run with jasmine

I tried different imports but none seem to fix my issue

The repro code is here : https://stackblitz.com/edit/angular-test-ng-model

Answer 1

In my case, I was using a customised Angular Component (SingleSelectModule) that weren't imported in the Unit test file. I hope this could help anybody else that run into the same issue than me:

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();

});

});