angular karma Export of name 'outlet' not found! Expected undefined to be truthy

user_7270398 0
Viewed 2370

I have a router animation, which works well. Its fairly simple. However I cannot get the test to pass.

I have the set up for it as below. 

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { fader } from 'app/route-animations';

@Component({
    selector: 'app-logged-in-layout',
    templateUrl: './logged-in-layout.component.html',
    styleUrls: ['./logged-in-layout.component.less'],
    animations: [fader],
})
export class LoggedInLayoutComponent implements OnInit {
    constructor() {}

    prepareRoute(outlet: RouterOutlet) {
        return (
            outlet &&
            outlet.activatedRouteData &&
            outlet.activatedRouteData['animation']
        );
    }

The html is as follows

<main [@routeAnimations]="prepareRoute(outlet)" class="content">
    <router-outlet #outlet="outlet"></router-outlet>
</main>

Below I have an image for the test results

enter image description here

Now I realise there is a template ref called #outlet, but what I don't know is do I define that in the test file or the component file

How would I do that?

My test file is 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { LoggedInLayoutComponent } from './logged-in-layout.component';
import { RouterOutlet } from '@angular/router';

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [LoggedInLayoutComponent],
            providers: [RouterOutlet],
        }).compileComponents();
    }));

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

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

});

Any guidance would be appreciated.

karma-jasmine angular
2 Answers

Ok so, figured it out eventually. Hope it helps someone else.

Import the BrowserAnimationsModule, NoopAnimationsModule,

So the test file looks like this. 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { WeekJournalComponent } from './week-journal.component';
import { DebugElement } from '@angular/core';
import {
    BrowserAnimationsModule,
    NoopAnimationsModule,
} from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [WeekJournalComponent],
            imports: [
                BrowserAnimationsModule,
                NoopAnimationsModule,
                RouterTestingModule,
            ],
        }).compileComponents();
    }));

beforeEach(() => {
    fixture = TestBed.createComponent(WeekJournalComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement;
    fixture.detectChanges();
});

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

I've also found that if you use RouterTestingModule and provide a path to a component that uses BSDatePicker, then you will get this error. My solution was to use a DummyComponent to do the routing:

  imports: [
    RouterTestingModule.withRoutes([{
    path: 'mypath',
    component: DummyComponent
   }]),

And then declare dummy component at the top like so:

@Component({
  template: ''
})
class DummyComponent {
}

It would seem the routed-to component does not like having BsDatePicker loaded and will give this error no matter what you import etc. It also means I'm only testing this component rather than a long list.

user_17742910
Related