错误：模板解析错误：没有将“exportAs”设置为“matAutocomplete”的指令（““auto”[formControl] =“...”

Question

我正在编写单元测试来检查组件是否成功创建。我看到以下错误 错误：模板解析错误：没有将“exportAs”设置为“matAutocomplete”的指令（“”auto” [formControl

这是我的包含自动完成指令的 template.html

<mat-form-field >
  <input matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
  <mat-autocomplete panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn" style="width:750px;">
     <mat-option  *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID + '('+ customer.AccountName + ')'" (click)="onCustomerChange(customer)">
      {{customer.AccountID}} ({{customer.AccountName}})
     </mat-option>
  </mat-autocomplete>
</mat-form-field>

这是单元测试spec.file，我尝试了以下的东西，

import { ActualComponent } from './ActualComponent';
import { NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA,Directive } from '@angular/core'; 

@Directive({
  selector:'<matAutocomplete>',
})
export class matAutocomplete{}

 beforeEach(()=>{
  TestBed.configureTestingModule({
       imports:[....],
      declarations:[...matAutocomplete],(1)
       ...
     schemas:[NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA] //this didn't fix (2)
})

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

我希望测试能够通过 (1) 定义指令“matAutocomplete”并在规范文件中声明 (2) 在 testbed 配置中标记模式但是测试仍然没有通过！有人给我建议吗？

Answer 1

选择器<matAutocomplete> 将不起作用。尝试使用[matAutoComplete] 并将@Input() matAutocomplete 添加到类中。下一步是将exportAs 添加到指令装饰器中：

@Directive({
  selector:'[matAutocomplete]',
  exportAs: 'matAutocomplete'
})
export class matAutocomplete {
   @Input() matAutocomplete: any;
}

更新 使用导入的 Angular 材质模块进行测试可能会更好。否则，测试并不会真正测试任何相关内容。

您可以尝试以下方法吗：

1)

import {ReactiveFormsModule} from '@angular/forms';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatInputModule} from '@angular/material/input';
import {MatSelectModule} from '@angular/material/select';
import {MatFormFieldModule} from '@angular/material/form-field';


...
// inside beforeEach:
TestBed.configureTestingModule({
  imports:[ReactiveFormsModule, 
           MatAutocompleteModule, MatInputModule, 
           MatSelectModule, MatFormFieldModule],
  declarations:[AppComponent],  // add your component instead of AppComponent

  // schemas:[NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA] 
});

2) 移除自定义 matAutocomplete 指令。