Question

我使用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>创建了一个Angular 4项目，它在Chrome中运行良好，但是当我尝试执行自动化测试时，我收到以下错误：

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) { } }文件：

index.lock

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

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测试：组件不是已知元素

1 个答案: