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

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

我知道它已经晚了，但它会对其他人有所帮助

当您运行 ng test 时出现 CUSTOM_ELEMENTS_SCHEMA 错误，这是因为 TestBed 将模拟一个模块，在该模块中它尝试加载您的 DataPickerComponent ，如果您使用自定义 HTML 标记，您将获得角度CUSTOM_ELEMENTS_SCHEMA 异常在您运行 Angular 应用程序 (angular2+) 时已经处理，因此在正常运行应用程序时不会出现此异常，但是当您使用 ng test 运行测试用例时会出现此异常，因此您有将此添加到schemas 选项中。

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

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

关键点是您必须在 .spec.ts 文件中为组件添加相同的数据，例如在提供程序部分添加服务，如果您使用任何模块，则将其添加到导入部分，因为在每个测试用例中 TestBed 模拟模块，因此您必须在 configureTestingModule({/* 组件规范*/}) 函数中为该组件提供每个依赖项

希望能成功

Answer 2

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();
  });
});