Template parse error in Jasmine test but not actual app

angular 7 unit testing
testing angular components with @input
spyon angular
angular mock service
angular unit test service
angular testing
fixture debugelement query
error: staticinjectorerror(dynamictestmodule)

I've developed a Jasmine spec to test an angular 2 component MiddleRowComponent. When I run the jasmine test, it gives this 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:

However if i just run my web app in the browser like normal, the error does not occur. circles is indeed a part of the module. And custom-button is part of a shared module that is imported. Here is the module.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 { }

Everything is imported and declared as it should be and works when running the app without testing it. I use a done to make the beforeEach work given its async nature of getting the component template from a separate template file. I run the test with a jasmine spec runner HTML file. How come my components that MiddleRowComponent uses are not known elements in the jasmine test but are when running the app normally?

Here is the jasmine spec:

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');
    });
});

full 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:
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:(…)

Well, the module of your test only has MiddleRowComponent declared. So it doesn't know about CircleComponent:

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

Add all the necessary components in the declarations of the testing module, or add LandingPageModule to the imports of the testing module.

Error: Template parse errors when running tests after adding a , Error: Template parse errors when running tests after adding a The Template parse errors will be thrown to complain about the custom component is not known. I configured the TestBed to declare the component but the error from new component to the testbed for app.component.spec.ts since now it  Karma Jasmine unit test spec is not recognizing HTML tags, Karma Jasmine unit testing causing Template parse errors: The pipe &amp;quot;translate&amp;quot; could not be found Current behavior I&amp;#39;m trying to unit test the simple ng2-translation appli

I had a similar problem and found this page, and while JB Nizet's answer led to a solution for me, it didn't work for me as-is. I'm not trying to take away from his solid answer to the original question, just trying to help the next person who comes along.

My problem was exactly like the OP's, except that my custom component (MiddleRowComponent in this example) used a third-party component. The unit test error was given about the third-party tag used in my template, even though it worked just fine in the actual app. The solution for me was to also include an imports for the third-party in my testing module:

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

Then my unit tests ran without the error. Hope that helps!

Angular 6: Using Karma for Unit Testing, You can also unit test an Angular app with other testing libraries and test runners. The get method wasn't type safe, it always returned any , and this is error prone The current BannerComponent presents static title text in the HTML template. There is no nested syntax (like a Promise.then() ) to disrupt the flow of control. I've created an app using this library. No problems, library works fine. Though when I'm trying to unit test, I'm getting these errors: Failed: Uncaught (in promise): Error: Template parse errors: 'modal-body' is not a known element: 1. If 'modal-body' is an Angular component, then verify that it is part of this module. 2.

Another option is to add the NO_ERRORS_SCHEMA schema to the test setup. Any unrecognised components will now not cause an error. I use this a lot when working with third party modules like Angular Material Design.

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

Testing, When I run karma unit tests for components using primeng they fail when The component builds and runs correctly and the app runs itself, it's just the tests that fail. As an aside Webstorm highlights the PrimeNG attributes as 'not Failed: Uncaught (in promise): Error: Template parse errors: Can't bind to  Angular 2.4.6 By installing the plugin and importing it in app module I get the following console error: "Error: Template parse errors: "let-" is only supported on template elements.

Template parse error running karma w/webpack, Template parse error in Jasmine test but not actual app. I've developed a Jasmine spec to test an angular 2 component MiddleRowComponent. When I run the  It’s best, then, to just write specific unit tests from the get-go that each handle one and only one test case. As we’ll see later on, thinking through test cases and then turning those into actual unit tests need not take a long time, so don’t let the idea that writing a bunch of tests for one unit will be tedious and time-consuming.

error: Failed: Template parse errors: 'mat-checkbox' is not a known , I gathered the most common questions and answers from be used to initialize class members but shouldn't do actual "work". error when launching my Angular app, even if the component is not displayed. zone.js:461 Unhandled Promise rejection: Template parse errors: routing-test.component.ts Failed: Template parse errors: 'app-xxx' is not a known element: 1. If 'app-xxx' is an Angular component, then verify that it is part of this module. 2. If 'app-xxx' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]

48 answers on StackOverflow to the most popular Angular questions, The user can therefore select the variant that fits best to the actual application. 2004): (1) Unit Testing: For each module These are mainly black-box tests, i.e., the program does not inspect the actual implementation but only check a test program compiles correctly even if some templates contain syntax errors, SeqAn 17. Uncaught Error: Template parse errors: 'toaster-container' is not a known element: If 'toaster-container' is an Angular component, then verify that it is part of this module.