jestjs - Jest error "Can't bind to 'panelClass' since it isn't a known property of &

admin管理员组

文章数量:1125447

My app builds just fine, tests for components with Matselect work fine. But for for 1 such component's test file, I have the following problem. Started since I moved my setup from Karma to Jest, (in Angular 16, 17, 18):

console.error
      NG0303: Can't bind to 'panelClass' since it isn't a known property of 'mat-select' (used in the 'DropdownWithVirtualScrollComponent' component template).
      1. If 'mat-select' is an Angular component and it has the 'panelClass' input, then verify that it is a part of an @NgModule where this component is declared.
      2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
      3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

A test is able to log panelClass string that I provided in HTML, if I decide to get it via @ViewChild:

  fit('should create', () => {
    console.log(component.matselect.panelClass); //  <= here, logs my string.
    expect(component).toBeTruthy();
  });

Of course, in beforeEach I do have MatSelect in imports:

await TestBed.configureTestingModule({ imports: [MatSelectModule, ...]})

Strange enough, even if I do add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of a component under test, the error stays. How to fix this error?

---

Update1: This component is different from others in a way, that formControl for the <mat-select> is provided as an @Input from any parent that uses it, as opposed to creating a new FormControl() directly in the TS of the component under testing:

[formControl]="formControlRef", where @Input() formControlRef: UntypedFormControl;

My app builds just fine, tests for components with Matselect work fine. But for for 1 such component's test file, I have the following problem. Started since I moved my setup from Karma to Jest, (in Angular 16, 17, 18):

console.error
      NG0303: Can't bind to 'panelClass' since it isn't a known property of 'mat-select' (used in the 'DropdownWithVirtualScrollComponent' component template).
      1. If 'mat-select' is an Angular component and it has the 'panelClass' input, then verify that it is a part of an @NgModule where this component is declared.
      2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
      3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

A test is able to log panelClass string that I provided in HTML, if I decide to get it via @ViewChild:

  fit('should create', () => {
    console.log(component.matselect.panelClass); //  <= here, logs my string.
    expect(component).toBeTruthy();
  });

Of course, in beforeEach I do have MatSelect in imports:

await TestBed.configureTestingModule({ imports: [MatSelectModule, ...]})

Strange enough, even if I do add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of a component under test, the error stays. How to fix this error?

---

Update1: This component is different from others in a way, that formControl for the <mat-select> is provided as an @Input from any parent that uses it, as opposed to creating a new FormControl() directly in the TS of the component under testing:

[formControl]="formControlRef", where @Input() formControlRef: UntypedFormControl;

• jestjs
• angular-material
• mat-select

Share Improve this question Follow edited yesterday ilya.chepurnoy asked 2 days ago ilya.chepurnoyilya.chepurnoy 49566 silver badges1010 bronze badges 2

• please share the code of component.matselect in the main component, it should be a view child. – Naren Murali Commented 2 days ago
• It is a ViewChild there, and console.log() works just fine , as stated. I've found a reason for this error, but not yet a solution. Will post as separate answer. – ilya.chepurnoy Commented 2 days ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I've found a partial answer, to what is causing the issue: it is a directive used in HTML of my component, that injects MatSelect in its constructor. Now question is how to fix the error. Maybe passing MatSelect as an @Input to the directive would do the trick? I'll be updating my answer once I find the complete solution

Update1: no, passing MatSelect as input from my erroring component did not help.

本文标签：