No value accessor for form control when mocking MatSelectModule

Hi,

When trying to mock the mat-select component from Angular Material 9, the following error appears: Error: No value accessor for form control with name: 'toppings'.

The error occurs only when calling fixture.detectChanges() in the test.

Here is a repo with the minimal setup to reproduce this issue: https://github.com/volcomix/ng-mocks-mat-select-issue

<!-- app.component.html -->

<form [formGroup]="pizzaForm">
  <mat-form-field>
    <mat-label>Toppings</mat-label>
    <mat-select formControlName="toppings" multiple>
      <mat-option *ngFor="let topping of toppingList" [value]="topping">{{
        topping
      }}</mat-option>
    </mat-select>
  </mat-form-field>
</form>

// app.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  pizzaForm = this.formBuilder.group({
    toppings: [[]],
  });

  toppingList: string[] = [
    'Extra cheese',
    'Mushroom',
    'Onion',
    'Pepperoni',
    'Sausage',
    'Tomato',
  ];

  constructor(private formBuilder: FormBuilder) {}
}

// app.component.spec.ts

import { async, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MockModule } from 'ng-mocks';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule, MockModule(MatSelectModule)],
      declarations: [AppComponent],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    fixture.detectChanges();
    expect(app).toBeTruthy();
  });
});

Error details:

Error: No value accessor for form control with name: 'toppings'
            at _throwError (http://localhost:9876/_karma_webpack_/node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:3576:1)
            at setUpControl (http://localhost:9876/_karma_webpack_/node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:3400:1)
            at FormGroupDirective.addControl (http://localhost:9876/_karma_webpack_/node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:7679:1)
            at FormControlName._setUpControl (http://localhost:9876/_karma_webpack_/node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:8451:24)
            at FormControlName.ngOnChanges (http://localhost:9876/_karma_webpack_/node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:8368:1)
            at FormControlName.wrapOnChangesHook_inPreviousChangesStorage (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26966:1)
            at callHook (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4730:1)
            at callHooks (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4690:1)
            at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4630:1)

Thank you!

[Volcomix]

For anyone who is experiencing the same issue, here is a workaround by stubbing manually mat-select without ng-mocks:

// app.component.spec.ts

import { Component } from '@angular/core';
import {
  ControlValueAccessor,
  NG_VALUE_ACCESSOR,
  ReactiveFormsModule,
} from '@angular/forms';
import { async, TestBed } from '@angular/core/testing';
import { MatOptionModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MockModule } from 'ng-mocks';
import { AppComponent } from './app.component';

@Component({
  selector: 'mat-select',
  template: '',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: MatSelectStubComponent,
      multi: true,
    },
  ],
})
class MatSelectStubComponent implements ControlValueAccessor {
  writeValue(obj: any) {}
  registerOnChange(fn: any) {}
  registerOnTouched(fn: any) {}
  setDisabledState(isDisabled: boolean) {}
}

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule,
        MockModule(MatFormFieldModule),
        MockModule(MatOptionModule),
      ],
      declarations: [AppComponent, MatSelectStubComponent],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    fixture.detectChanges();
    expect(app).toBeTruthy();
  });
});

[satanTime]

Hi all dear developers,

This page is quite popular in search results.

Might you create an issue in this repo and describe what you’ve been looking for? Hopefully, your case will be answered.