Ionic 2 karma test failed 'ion-label' is not a known element

Question

On running npm test i am getting this error on my component ->

  **Can't bind to 'formGroup' since it isn't a known property of 
   'form'. 
   ("
  </div>
<form [ERROR ->][formGroup]="loginForm" text-center>
<ion-list>
"): ng:///DynamicTestModule/Login.html@18:6
'ion-label' is not a known element:
1. If 'ion-label' is an Angular component, then verify that it is part 
of this module.
2. If 'ion-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' 
to the '@NgModule.schemas' of this component to suppress this message. 
 ("
<ion-item>
    [ERROR ->]<ion-label floating>Email</ion-label>
    <ion-input type="email" formControlName="email" [class.inva"): 
 ng:///DynamicTestModule/Login.html@25:4
'ion-input' is not a known element:
1. If 'ion-input' is an Angular component, then verify that it is part 
of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-item>
    <ion-label floating>Email</ion-label>
    [ERROR ->]<ion-input type="email" formControlName="email" [class.invalid]="!loginForm.controls.email.valid && ("): ng:///DynamicTestModule/Login.html@26:4
'ion-item' is not a known element:

**1. If 'ion-item' is an Angular component, then verify that it is part of this module. 2. If 'ion-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' enter code hereof this component to suppress this message. (" [ERROR ->]****

this is my test.ts

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { getTestBed, TestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { App, Config, Form, IonicModule, Keyboard, DomController, MenuController, NavController, Platform } from 'ionic-angular';
import { ConfigMock } from './mocks';




// Unfortunately there's no typing for the `__karma__` variable. Just 
 declare it as any.
declare var __karma__: any;
declare var require: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function (): void {
  // noop
};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
);

// Then we find all the tests.
let context: any = require.context('./', true, /\.spec\.ts/);

// And load the modules.
context.keys().map(context);

// Finally, start Karma to run the tests.
__karma__.start();
``

Have a look at this: angular.io/docs/ts/latest/guide/forms.html — Nico

Christian Benseler Christian Benseler · Accepted Answer · 2017-06-05T19:02:30

Did you import IonicModule when configuring your test suite? Something like (in test.ts):

public static configureIonicTestingModule(components: Array<any>): typeof TestBed {
  return TestBed.configureTestingModule({
    declarations: [
      ...components,
    ],
    providers: [
      App, Form, DomController
    ],
    imports: [
      FormsModule,
      IonicModule, // <- this here
    ],
  });
}

Ionic 2 karma test failed 'ion-label' is not a known element

1 Answers