How to correctly use clr-nav-level to fix spec.ts error

Question

I'm using Clarity and Angular for an application and I'm trying to add tests to it. But I keep getting this error whenever I try to run the test:

Can't bind to 'clr-nav-level' since it isn't a known property of 'div'

Do I have to import anything else from the Clarity library to make this work?

Here's my spec.ts code:

describe('AppComponent', () => {
  let appComponent: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ClarityModule,
        RouterTestingModule,
        BrowserAnimationsModule
      ],
      declarations: [
        AppComponent,
        NavbarComponent
      ]
    }).compileComponents();
    fixture = TestBed.createComponent(AppComponent);
    appComponent = fixture.debugElement.componentInstance;
  }));

  it('should create the app', async(() => {
    expect(appComponent).toBeTruthy();
  }));
});

Answer 1

Add this to your TestBed configuration:

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

CUSTOM_ELEMENTS_SCHEMA Defines a schema that will allow:

• any non-Angular elements with a - in their name
• any properties on elements with a - in their name which is the common rule for custom elements.

More info: https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA

This will ignore all custom properties on your HTML elements.

If this didn't resolve your issue please put your component code in the question.