Question

我在开始角度项目测试时遇到了问题。

上下文：

我有一个主要组件嵌套其他组件以显示一个微调器：

<div class='showSpinner' *ngIf="showSpinnerCustomer">
    <div class="spinner">
      <app-spinnerCustomers></app-spinnerCustomers>
      <h2>Loading...</h2>
    </div>
  </div>`

当我启动命令ng测试并出现此类错误时出现问题：

Failed: Template parse errors:
'app-spinnerCustomers' is not a known element:
1. If 'app-spinnerCustomers' is an Angular component, then verify that it is part of this module.
2. If 'app-spinnerCustomers' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div class='showSpinner' *ngIf="showSpinnerCustomer">
    <div class="spinner">
      [ERROR ->]<app-spinnerCustomers></app-spinnerCustomers>
      <h2>Loading...</h2>
    </div>
"): ng:///DynamicTestModule/ListCustomersComponent.html@12:6

我将这个模块化为2个模块：

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { APP_ROUTES } from './app.routes';
import { ListCustomersComponent } from './components/list-customers/list-customers.component';
import { HttpClientModule } from '@angular/common/http';
import { CustomerService } from './services/customer/customer.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SpinnersModule } from './components/spinners/spinners.module';

@NgModule({
  declarations: [
    AppComponent,
    ListCustomersComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    APP_ROUTES,
    SpinnersModule
  ],
  providers: [
    CustomerService
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

在微调模块中：

spinners.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SpinnerCustomersComponent } from './spinnerCustomers/spinnerCustomers.component';

@NgModule({
    declarations: [
        SpinnerCustomersComponent
    ],
    imports: [
      CommonModule
    ],
    exports: [
        SpinnerCustomersComponent
    ]
  })
export class SpinnersModule { }

任何线索在这里发生了什么，我该怎么做才能解决它？我已经没想完了。

谢谢。

编辑： app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
});

spinnerCustonmers.component.spec.ts

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

import { SpinnerCustomersComponent } from './spinnerCustomers.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SpinnerCustomersComponent ]
    })
    .compileComponents();
  }));

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

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

Answer 1

我发现在每个组件spec.ts文件中添加了de SpinnerModule的修正

import { SpinnersModule } from '../spinners/spinners.module';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [SpinnersModule],
      declarations: [ ListCustomersComponent ]
    })
    .compileComponents();
  }));

谢谢大家!!

Karma的角度测试错误

1 个答案: