测试 Angular 2 应用程序中的“CUSTOM_ELEMENTS_SCHEMA”错误

Posted 2023-02-22

【中文标题】测试 Angular 2 应用程序中的“CUSTOM_ELEMENTS_SCHEMA”错误

【英文标题】："CUSTOM_ELEMENTS_SCHEMA" Errors in Testing Angular 2 App

【发布时间】：2017-07-02 02:44:18

【问题描述】：

在为我的 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 添加到我的根模块以及所有其他模块，但我仍然收到错误。

我还需要做什么？ 这需要在所有模块中，还是只在根目录中？ 还有什么需要补充的吗？

【问题讨论】：

在所有模块中，您有一个包含“-”的选择器的组件。

是的，正如我上面提到的，我已经这样做了。我已将此添加到我的所有模块中。仍然收到错误。

您已将架构：[CUSTOM_ELEMENTS_SCHEMA] 添加到您的 TestBed.configureTestingModule？

我不相信我有那个模块。我需要拥有它吗？

是的，这里有：angular.io/docs/ts/latest/api/core/testing/index/… 还可以查看与使用 ngModules 进行测试相关的文档：angular.io/docs/ts/latest/guide/testing.html#!#testbed

【参考方案1】：

所以我必须做的是在 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();
  );

【讨论】：

谢谢，这正是我想要的！

这是唯一对我有用的解决方案...... 3 年后;)

【参考方案2】：

这样对我有用，在您的 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();
  );
);