Cypress mat-select select command failing - material-ui

Question

Trying to test a select control with Cypress. I found the .select(option) command which seems pretty straight-forward, but cannot get it to work
This is my form:
<form>
<mat-form-field appearance="fill">
<mat-label>Food ingredients</mat-label>
<mat-select [(ngModel)]="selectedValue" name="food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
This is my test:
cy.get('mat-select').click()
.select('Cauliflower')
but it throws the error "cy.select() can only be called on a <select>"

Answer 1

Angular mat-select isn't a normal <select> element, you can't use the .select() command.
Use .click() instead
cy.get('mat-select').click()
cy.contains('mat-option', 'Cauliflower').click()
This is the runtime HTML
<div class="mat-select-panel-wrap">
<div role="listbox">
<mat-option role="option">
<span class="mat-option-text"> Cabbage </span>
</mat-option>
<mat-option role="option">
<span class="mat-option-text"> Cauliflower </span>
</mat-option>
<mat-option role="option">
<span class="mat-option-text"> Capsicum </span>
</mat-option>
</div>
</div>