title: How to test a component which contains a custom form control?
body: <p>I got a component like this</p>
  
  <pre><code>@Component({
        selector: 'app-custom-form-control',
        templateUrl: '&lt;input&gt;',
        providers: [
          {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() =&gt; SelectComponent),
            multi: true
          }
        ]
      })
  export class CustomFormControlComponent implements ControlValueAccessor {...}
  </code></pre>
  
  <p>As you see it's a custom form control. I use it in a component which I'm going to test.</p>
  
  <pre><code>    @Component({
        selector: 'app-root',
        templateUrl: '&lt;div [formGroup]="form"&gt;
            &lt;app-custom-form-control formControlName="my_field"&gt;&lt;/app-custom-form-control&gt;
        &lt;/div&gt;',
      })
      export class AppComponent implements OnInit, OnDestroy {...}
  </code></pre>
  
  <p>So how can I mock <code>app-custom-form-control</code> for my test?</p>
  
  <p>The current implementation needs a real component...</p>
  
  <pre><code>  beforeEach(async(() =&gt; {
      const testRouter = new RouterStub();
      const testDataService = new DataServiceStub();
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          CustomFormControlComponent // it is a real stuff
        ],
        imports: [
          ReactiveFormsModule
        ],
        providers: [
          { provide: Router, useValue: testRouter },
          { provide: DataService, useValue: testDataService }
        ],
        schemas: [ NO_ERRORS_SCHEMA ]
      }).compileComponents();
    }));
  </code></pre>
  
  <p>Otherwise(without declaration the component) I got an error <code>Failed: No value accessor for form control with name: app-custom-form-control</code></p>