spec - unit test angular 5

Error de análisis de plantilla en la prueba de Jasmine pero no en la aplicación real

Question

He desarrollado una especificación de Jasmine para probar un componente angular de MiddleRowComponent . Cuando ejecuto la prueba de jazmín, da este error:

zone.js:388 Unhandled Promise rejection: Template parse errors:
''circles'' is not a known element:
1. If ''circles'' is an Angular component, then verify that it is part of this module.
2. If ''circles'' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the ''@NgModule.schemas'' of this component to suppress this message. ("</div>
      <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div">
         [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles>
      </div>
      <div class="col-md-10 "): MiddleRowComponent@9:9
''custom-button'' is not a known element:

Sin embargo, si ejecuto mi aplicación web en el navegador como de costumbre, no se produce el error. circles son de hecho una parte del módulo. Y custom-button es parte de un módulo compartido que se importa. Aquí está el módulo.ts:

    import { NgModule }           from ''@angular/core'';
import { CommonModule }       from ''@angular/common'';
import { SharedModule } from ''../shared/shared.module'';
import * as LandingPage from ''./index'';

@NgModule({
   imports: [ CommonModule, SharedModule ],
   declarations: [
      LandingPage.MiddleRowComponent,
      LandingPage.LandingPageComponent,
      LandingPage.CirclesComponent
   ],
   exports: [ LandingPage.LandingPageComponent ],
})
export class LandingPageModule { }

Todo se importa y se declara como debería y funciona cuando se ejecuta la aplicación sin probarla. Utilizo un " done para hacer que el trabajo "antes de cada" sea una naturaleza asíncrona de obtener la plantilla del componente desde un archivo de plantilla separado. Ruyo la prueba con un archivo html de jasmine spec runner. ¿Por qué mis componentes que utiliza MiddleRowComponent no son elementos conocidos en la prueba de jasmine pero se ejecutan normalmente cuando se ejecuta la aplicación?

Aquí está la especificación de jazmín:

import ''zone.js/dist/long-stack-trace-zone.js'';
import ''zone.js/dist/async-test.js'';
import ''zone.js/dist/fake-async-test.js'';
import ''zone.js/dist/sync-test.js'';
import ''zone.js/dist/proxy.js'';
import ''zone.js/dist/jasmine-patch.js'';

import { ComponentFixture, TestBed } from ''@angular/core/testing'';
import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting
} from ''@angular/platform-browser-dynamic/testing'';
import { By } from ''@angular/platform-browser'';
import { DebugElement } from ''@angular/core'';

import { MiddleRowComponent } from ''./middle-row.component'';

let comp: MiddleRowComponent;
let fixture: ComponentFixture<MiddleRowComponent>;
let de: DebugElement;
let el: HTMLElement;

describe(''MiddleRowComponent'', () => {
   var fixture: any;
   var comp: any;
    beforeAll(() => {
        TestBed.resetTestEnvironment();
        TestBed.initTestEnvironment(BrowserDynamicTestingModule,
            platformBrowserDynamicTesting());
    });

    beforeEach((done) => {
        TestBed.configureTestingModule({
            declarations: [MiddleRowComponent], // declare the test component
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(MiddleRowComponent);
            comp = fixture.componentInstance; // MiddleRowComponent test instance
            // query for the title <h1> by CSS element selector
            de = fixture.debugElement.query(By.css(''h1''));
            el = de.nativeElement;
            done();
        });
    });

    it(''should display original title'', () => {
        fixture.detectChanges();
        expect(el.textContent).toContain(comp.word);
    });

    it(''should display a different test title'', () => {
        comp.word = ''Test Title'';
        fixture.detectChanges();
        expect(el.textContent).toContain(''Test Title'');
    });
});

error completo

zone.js:388 Unhandled Promise rejection: Template parse errors:
''circles'' is not a known element:
1. If ''circles'' is an Angular component, then verify that it is part of this module.
2. If ''circles'' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the ''@NgModule.schemas'' of this component to suppress this message. ("</div>
      <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div">
         [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles>
      </div>
      <div class="col-md-10 "): MiddleRowComponent@9:9
''custom-button'' is not a known element:
1. If ''custom-button'' is an Angular component, then verify that it is part of this module.
2. If ''custom-button'' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the ''@NgModule.schemas'' of this component to suppress this message. ("
      </div>
      <div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div">
         [ERROR ->]<custom-button buttonName="try now" (click)="tryNowClick()"></custom-button>
      </div>
   </div>
"): MiddleRowComponent@12:9 ; Zone: ProxyZone ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
''circles'' is not a known element:
1. If ''circles'' is an Angular component, then verify that it is part of this module.
2. If ''circles'' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the ''@NgModule.schemas'' of this component to suppress this message. ("</div>
      <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div">
         [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles>
      </div>
      <div class="col-md-10 "): MiddleRowComponent@9:9
''custom-button'' is not a known element:
1. If ''custom-button'' is an Angular component, then verify that it is part of this module.
2. If ''custom-button'' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the ''@NgModule.schemas'' of this component to suppress this message. ("
      </div>
      <div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div">
         [ERROR ->]<custom-button buttonName="try now" (click)="tryNowClick()"></custom-button>
      </div>
   </div>
"): MiddleRowComponent@12:9
    at TemplateParser.parse (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:7730:21)
    at RuntimeCompiler._compileTemplate (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17573:53)
    at eval (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:64)
    at Set.forEach (native)
    at RuntimeCompiler._compileComponents (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:21)
    at createResult (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17404:21)
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:232:26)
    at ProxyZoneSpec.onInvoke (http://localhost:3002/node_modules/zone.js/dist/proxy.js:79:39)
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:231:32)
    at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:114:43)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
zone.js:390 Error: Uncaught (in promise): Error: Template parse errors:(…)

Answer 1

Bueno, el módulo de su prueba solo ha declarado MiddleRowComponent. Así que no sabe sobre CircleComponent:

TestBed.configureTestingModule({
    declarations: [MiddleRowComponent], // declare the test component
})

Agregue todos los componentes necesarios en las declaraciones del módulo de prueba, o agregue LandingPageModule a las importaciones del módulo de prueba.

Answer 2

Otra opción es agregar el esquema NO_ERRORS_SCHEMA a la configuración de prueba. Cualquier componente no reconocido ahora no causará un error. Lo uso mucho cuando trabajo con módulos de terceros como Angular Material Design.

import { NO_ERRORS_SCHEMA } from ''@angular/core'';
...
  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [MiddleRowComponent],
        schemas: [NO_ERRORS_SCHEMA]
      }).compileComponents();
    })
  );

Answer 3

Tuve un problema similar y encontré esta página, y aunque la respuesta de JB Nizet me llevó a una solución, no funcionó como estaba. No estoy tratando de quitarle su respuesta sólida a la pregunta original, solo estoy tratando de ayudar a la siguiente persona que venga.

Mi problema era exactamente igual al de los OP, excepto que mi componente personalizado ( MiddleRowComponent en este ejemplo) usaba un componente de terceros. El error de prueba de la unidad se dio acerca de la etiqueta de terceros utilizada en mi plantilla, aunque funcionó bien en la aplicación real. La solución para mí fue incluir también una imports para el tercero en mi módulo de prueba:

TestBed.configureTestingModule({
    declarations: [MiddleRowComponent],
    imports: [TheThirdPartyModule]
})

Entonces mis pruebas de unidad se ejecutaron sin el error. ¡Espero que ayude!