Question

我只是在对组件是否已创建进行单元测试。以下是我的规格文件

import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
import { RouterTestingModule } from '@angular/router/testing';
import { MatTableModule } from '@angular/material';
import { HttpClientModule, HttpXhrBackend } from '@angular/common/http';
import { MockBackend } from '@angular/http/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { ReleaseListComponent } from './release-list.component';
import { ReleaseService } from '../release.service';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [RouterTestingModule, MatTableModule, HttpClientModule ],
      declarations: [ReleaseListComponent],
      providers: [ReleaseService]
    })
      .compileComponents();
  });

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

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

我的组件

import { Component, OnInit, ViewChild } from '@angular/core';
import { ReleaseService } from '../release.service';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';

@Component({
  selector: 'bw-release-list',
  templateUrl: './release-list.component.html'
})
export class ReleaseListComponent implements OnInit {
  title = 'Release notes';
  displayedColumns = ['title'];
  dataSource;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor( private releaseNotes: ReleaseService ) { }

  ngOnInit() {
    this.releaseNotes.getReleaseNotes()
      .subscribe(data => {
        this.dataSource = new MatTableDataSource(data.results);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      });
  }
  applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
  }
}

我要An error was thrown in afterAll调试了几个小时，但是没有运气。

我在beforeEach和async中都尝试过sync，我还将所有依赖项文件导入了规范文件。仍然抛出相同的错误。

请向我建议如何解决此问题。

Answer 1

您似乎要导入HttpClientTestingModule，但随后使用的是：
imports: [RouterTestingModule, HttpClientModule ],。这应该是HttpClientTestingModule

然后，在浏览器中启动测试并打开console，您可能会在浏览器控制台中看到一些其他问题，当您仅在cmd提示符下运行时这些问题不会显示。

例如，我在源地图方面遇到了一些问题，必须在测试中将其禁用使用ng test --source-map=false

茉莉花单元测试“毕竟发生了错误”

1 个答案: