Question

我在某些组件上运行Angular测试时遇到了一些问题，但是这些组件在生产中运行良好。我不断收到此错误消息：

Failed: Template parse errors:
'app-date-picker' is not a known element:
1. If 'app-date-picker' is an Angular component, then verify that it is part of this module.
2. If 'app-date-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      </nav>
    </div>
    [ERROR ->]<app-date-picker></app-date-picker>
    <div class="clearfix"></div>
  </div>

我这里只有一个模块：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { DatePickerComponent } from './date-picker/date-picker.component';

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    AppComponent,
    DatePickerComponent,
    ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})

我的组件如下所示：

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss']
})

export class DatePickerComponent implements OnInit {

    constructor(private dateService: DateService) {
        this.startDateRange = new FormControl(this.dateService.startDateRange);
        this.endDateRange = new FormControl(this.dateService.endDateRange);
    }

    ngOnInit() {...}
    updateDateService() {...}

}

通过在schemas: [NO_ERRORS_SCHEMA]对象中添加TestBed.configureTestingModule，我可以使这些错误中的一些消失，但是它们被[object ErrorEvent] thrown错误消息所取代，这丝毫没有帮助我。有谁知道我该如何解决？请让我知道是否需要提供更多信息，谢谢！

编辑：

以下是发生故障的组件之一的规格文件：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DatePickerComponent } from '../date-picker/date-picker.component';

import { MyComponent } from './my-github.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        MyComponent,
        DatePickerComponent
      ],
      // schemas: [NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

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

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

Answer 1

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DatePickerComponent } from '../date-picker/date-picker.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MyComponent } from './my-github.component';
import { RouterTestingModule } from '@angular/router/testing';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [RouterTestingModule],
      declarations: [
        MyComponent,
        DatePickerComponent
      ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    })
    .compileComponents();
  }));

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

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

Answer 2

我知道来晚了，但对其他人有帮助

运行CUSTOM_ELEMENTS_SCHEMA时出现ng test错误，这是因为TestBed将模拟一个模块，尝试在其中加载DataPickerComponent使用自定义HTML标记时，您将获得CUSTOM_ELEMENTS_SCHEMA异常，它在运行角度应用程序（angular2 +）时已经处理，因此在正常运行应用程序时不会出现此异常，但是在运行测试用例时会出现使用ng test来避免这种情况，您必须在schemas选项中添加它。

 `   TestBed.configureTestingModule({
        declarations: [ 
                DataPickerComponent
              ],
        providers: [GridWidthService],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
       }).compileComponents();  `

添加此行后，您将获得另一个Dependency Injection error，因为在组件中注入了服务DataService。因此，您还必须在test spec file中执行相同的操作。

要点是，您必须在.spec.ts文件中为组件添加相同的数据，例如在provider部分中添加服务，如果您使用的是任何模块，请在import部分中添加它，因为在每个测试用例中 TestBed 模拟模块，因此您必须在 configureTestingModule（{/ *组件规格* /}）函数
中提供该组件的每个依赖关系

希望它将起作用

业力/茉莉花测试中的Angular 2+模板解析错误

2 个答案: