web-dev-qa-db-fra.com

Erreurs "CUSTOM_ELEMENTS_SCHEMA" lors des tests Angular 2 App

En écrivant des tests pour mon Angular 2 app, je rencontre ces erreurs: les sélecteurs que nous utilisons:

"): AppComponent@12:35 'tab-view' is not a known element:
1. If 'my-tab' is an Angular component, then verify that it is part of this module.
2. If 'my-tab' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
    </div>
    <div class="app-body">
        [ERROR ->]<tab-view class="my-tab" [options]="tabOptions"></tab-view>
    </div> </div>

J'ai ajouté CUSTOM_ELEMENTS_SCHEMA à mon module racine, ainsi qu'à tous les autres modules, mais je reçois toujours des erreurs.

  • Que dois-je faire d'autre?
  • Est-ce que cela doit être dans tous les modules, ou seulement à la racine?
  • Y a-t-il autre chose que je dois ajouter?
javascriptunit-testingangulartypescript
13
Muirik

Donc, ce que je devais faire pour que cela fonctionne était également défini les schémas dans le TestBed.configureTestingModule - qui n'est pas un fichier de module séparé, mais une partie du fichier app.component.spec.ts. Merci à @ camaron pour l'astuce. Je pense que les documents pourraient être plus clairs sur ce point.

Quoi qu'il en soit, c'est ce que j'ai ajouté pour le faire fonctionner. Voici le contenu d'ouverture de mon fichier app.component.spec.ts.

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './../app.component';
import { RouterTestingModule } from '@angular/router/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
      declarations: [AppComponent],
      imports: [RouterTestingModule]
    });
    TestBed.compileComponents();
  });
24
Muirik

Cela fonctionne pour moi de cette façon, dans votre fichier spec.ts vous devez import vos composants et devez l'ajouter à declarations. Dans mon cas, c'est dans about.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AboutComponent } from './about.component';
import { SidebarComponent } from './../sidebar/sidebar.component';
import { FooterComponent } from './../footer/footer.component';

describe('AboutComponent', () => {
  let component: AboutComponent;
  let fixture: ComponentFixture<AboutComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
       declarations: [ AboutComponent, SidebarComponent, FooterComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AboutComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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