时间戳

首页 > 解决方案 > 找不到名称“出口”的角度业力导出！期望未定义是真实的

angular - 找不到名称“出口”的角度业力导出！期望未定义是真实的

问题描述

我有一个路由器动画，效果很好。它相当简单。但是我无法通过测试。

我的设置如下。

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

html如下

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

下面我有一张测试结果的图片

在此处输入图像描述

现在我意识到有一个名为#outlet 的模板引用，但我不知道我是在测试文件还是组件文件中定义它

我该怎么做？

我的测试文件是

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

});

任何指导将不胜感激。

标签： angularkarma-jasmine

解决方案

好吧，最终想通了。希望它可以帮助别人。

导入 BrowserAnimationsModule、NoopAnimationsModule、

所以测试文件看起来像这样。

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

推荐阅读