Unit test: error if component has an ion-content in the template


I have some unit tests (karma + jasmine) written that don’t work with a component that has an ion-content in its template.



  selector: 'page-about',
  templateUrl: 'about.html'
export class AboutPage {
	public versionnumber: any = 1;
	constructor( ) {



the spec is very simple:

let fixture: ComponentFixture<AboutPage> = null;
let instance: any = null;

describe('AboutPage', () => {
	beforeEach(async(() => TestUtils.beforeEachCompiler([AboutPage]).then(compiled => {
		fixture = compiled.fixture;
		instance = compiled.instance;

	it('initialises', () => {


the output is:

Chrome 56.0.2924 (Linux 0.0.0)
TypeError: Cannot read property ‘__zone_symbol__addEventListener’ of undefined
at Platform.registerListener (webpack:///~/ionic-angular/platform/platform.js:616:0 <- src/test.ts:1573:30)
at Keyboard.focusOutline (webpack:///~/ionic-angular/platform/keyboard.js:208:0 <- src/test.ts:22904:18)
at new Keyboard (webpack:///~/ionic-angular/platform/keyboard.js:34:0 <- src/test.ts:22730:14)

if I remove ion-content, this error is not thrown. I can change to any other element (either a html5 one, like a div, or an ionic element, like ion-card). But it the template has an ion-content, the test throws this error.

Ionic info:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.0
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.6.0
Xcode version: Not installed


Try adding IonicModule to your testing module imports.


Hi @rapropos
I added it but nothing changed:

 beforeEach(async(() => {
               imports: [

it’s really strange because the error is thrown only if there is an ion-content element. I can use any other ionic element (ion-card. ion-header, etc…) and the spec is correct.


If the template contains an ion-slides, same error occurs. If an ion-segment, no.
Very weird.


The problem was with the Platform from ionic-angular
I was providing it in the TestUtils and somehow it was not working.
I had to mock it

{ provide: Platform, useClass: PlatformMock }

It’s ok now.


That’s interesting. I didn’t need to do that. The only other difference that I see is that I added the app component to declarations (which I assume your TestUtils does) and imported IonicModule.forRoot(AppComponent). In any event, glad it’s working now.

1 Like

hey can you please share the code to do the same as i am facing the same issue thanks