web-dev-qa-db-ja.com

"CUSTOM_ELEMENTS_SCHEMA"テストのエラーAngular 2 App

私のAngular 2アプリのテストを書いていると、次のエラーが発生します：使用しているセレクター：

"): AppComponent@12:35 'tab-view' is not a known element:
1. If 'my-tab' is an Angular component, then verify that it is part of this module.
2. If 'my-tab' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
    </div>
    <div class="app-body">
        [ERROR ->]<tab-view class="my-tab" [options]="tabOptions"></tab-view>
    </div> </div>

私が追加しました - CUSTOM_ELEMENTS_SCHEMA 私のルートモジュールと他のすべてのモジュールに追加しましたが、まだエラーが発生します。

  • 他に何をする必要がありますか？
  • これはすべてのモジュールにある必要がありますか、それともルートだけですか？
  • 他に追加する必要があるものはありますか？
javascriptunit-testingangulartypescript
13
Muirik

したがって、これを機能させるために私がしなければならなかったことは、スキーマをTestBed.configureTestingModuleに設定することでもありました。これは、個別のモジュールファイルではなく、app.component.spec.tsファイルの一部です。先端のための @ camaron に感謝します。この点については、ドキュメントがより明確になると思います。

とにかく、これは私がそれを機能させるために追加したものです。これが私のapp.component.spec.tsファイルの最初の内容です。

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './../app.component';
import { RouterTestingModule } from '@angular/router/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
      declarations: [AppComponent],
      imports: [RouterTestingModule]
    });
    TestBed.compileComponents();
  });
24
Muirik

この方法で機能します。spec.tsファイルでコンポーネントをimportする必要があり、declarationsに追加する必要があります。私の場合、about.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AboutComponent } from './about.component';
import { SidebarComponent } from './../sidebar/sidebar.component';
import { FooterComponent } from './../footer/footer.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
       declarations: [ AboutComponent, SidebarComponent, FooterComponent ]
    })
    .compileComponents();
  }));

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

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