Angular e2e 测试：组件不是已知元素

Question

我用 ng cli 创建了一个 Angular 4 项目，它在 Chrome 中运行良好，但是当我尝试执行自动化测试时，出现以下错误：

HeadlessChrome 0.0.0 (Windows 10 0.0.0) AppComponent should create the app FAILED
        'vm-navbar' is not a known element:
        1. If 'vm-navbar' is an Angular component, then verify that it is part of this module.
        2. If 'vm-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<vm-navbar></vm-navbar>
        <div class="container">
        "): ng:///DynamicTestModule/AppComponent.html@0:0

        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        <div class="container">
            [ERROR ->]<router-outlet></router-outlet>
        </div>

其中 vm-navbar 是我的组件之一的标签。这是我 app.2e2-spec.ts:

中的内容

import { AppPage } from './app.po';

describe('vmplus App', () => {
    let page: AppPage;

    beforeEach(() => {
        page = new AppPage();
    });

    it('should display welcome message', () => {
        page.navigateTo();
        expect(page.getParagraphText()).toEqual('Welcome to app!');
    });
});

我试过像这样配置 TestBed，让它知道我的组件，但到目前为止没有成功：

import { NavBarComponent } from "../src/app/navbar/navbar.component";
import { TestBed } from "@angular/core/testing";
...
beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [ NavBarComponent ]
    });
    page = new AppPage();
});

这是我的 navbar.component.ts 文件的样子：

import { Component } from "@angular/core";
import { AuthGuard } from "../auth/auth-guard.service";

@Component({
    selector: 'vm-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: [ './navbar.component.scss' ]
})
export class NavBarComponent
{
    constructor(public authGuard: AuthGuard)
    {
    }
}

你知道如何解决这个问题吗？

Answer 1

发现问题，注意错误信息中的测试名称是"should create the app"，但源代码中的测试名称是"should display welcome message"。该错误发生在我不知道的另一个文件中：Angular 默认情况下在我的组件文件夹中创建了一个 app.component.spec.ts（不在我的测试文件夹中）。

为了解决这个问题，我在 app.component.spec.ts 中添加了所需的组件：NavBarComponent 和 AuthComponent，并在 imports 部分添加了 AppRoutingModule（即就是我在我的应用程序中所说的路由器）：

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

import { AppComponent } from './app.component';
import { NavBarComponent } from "./navbar/navbar.component";
import { AuthGuard } from "./auth/auth-guard.service";
import { AppRoutingModule } from "./app-routing.module";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { APP_BASE_HREF } from '@angular/common';

describe('AppComponent', () => {
    beforeEach(async(() => {
        const authGuardStub = {};

        TestBed.configureTestingModule({
            declarations: [
                AppComponent,
                AuthComponent,
                NavBarComponent
            ],
            imports: [
                AppRoutingModule,
                FormsModule,
                HttpModule
            ],
            providers: [
                { provide: AuthGuard, useValue: authGuardStub },
                { provide: APP_BASE_HREF, useValue : '/' }
            ]
        }).compileComponents();
    }));

    it('should create the app', async(() => {
        const fixture = TestBed.createComponent(AppComponent);
        const app = fixture.debugElement.componentInstance;
        expect(app).toBeTruthy();
    }));
});

Angular e2e 测试：组件不是已知元素

Angular e2e tests: component is not a known element

protractor

e2e-testing

angular