ng测试失败Karma / Jasmine：无法读取未定义的属性'appendChild'

Question

我想测试我的组件，看一切是否正常并且可以正常工作。 为此，我使用MockService创建了一个spec.ts文件，以避免使用我在组件中使用的真实服务（这就是为什么我直接在此文件中创建PriceRules对象的原因）：

// test components
import { ComponentFixture, TestBed, async } from '@angular/core/testing';

// app's components
import { CenterPricesComponent } from './center-prices.component';

// model
import { PriceRule } from '../models/price-rule';

//services
import { PriceRulesService } from '../services/price-rules.service';

// Others
import { Observable, of } from 'rxjs';
import { testBed } from '../TestHelper';

class MockPriceRulesService extends PriceRulesService {

    pricesRules: PriceRule[] = [
        new PriceRule("1", "tennis", 60, true, "clay", { hour: 8, minute: 18 }, { hour: 19, minute: 30 }, 
        66, [true, true, true, true, true, true, true]),
        new PriceRule("2", "padel", 90, false, "clay", { hour: 9, minute: 30 }, { hour: 20, minute: 40 }, 
        32, [true, false, true, true, false, true, true])];

    getPriceRules(): Observable<PriceRule[]> {
        return of(this.pricesRules);
    }
}

describe('CenterPricesComponent', () => {

    let component: CenterPricesComponent;
    let fixture: ComponentFixture<CenterPricesComponent>;
    let service: MockPriceRulesService;

    beforeEach(async(() => {
        service = new MockPriceRulesService(null);
        TestBed.overrideProvider(PriceRulesService, { useValue: service });
        TestBed.configureTestingModule(testBed).compileComponents();

        fixture = TestBed.createComponent(CenterPricesComponent);
        fixture.detectChanges();
        component = fixture.componentInstance;
    }));

    // app
    fit('should create center prices component', () => {
        expect(component).toBeTruthy();
    });   
});

但是您可以看到，甚至没有创建该组件。 testBed变量包含所有必需的imports，declarations和providers。

运行ng test时，我从Karma DEBUG RUNNER / Jasmine 3.3.0中收到此错误：

error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 929025027, rootNodeFlags: 33554433, nodeMatchedQueries: 340, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 929025027, directChildFlags: 33603585, childMatchedQueries: 340, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 100, bindings: [ Object({ flags: 2, ns: '', name: 'xxsmall-card', nonMinifiedName: 'xxsmall-card', securityContext: undefined, suffix: undefined }), Object({ flags: 2, ns: '', name: 'xsmall-card', nonMinifiedName: 'xsmall-card', securityContext: undefined, suffix: undefined }), Object({ flags: 2, ns: '', name: 'small-card', nonMinifiedName: 'small-card', securityContext: undefined, suffix: undefined }), Object({ flags: 2, ns: '', name: 'medium-card', nonMinifiedName: 'medium-card', securityContext: und ...
    at <Jasmine>
    at NbOverlayContainerAdapter.push../node_modules/@nebular/theme/components/cdk/adapter/overlay-container-adapter.js.NbOverlayContainerAdapter._createContainer (http://localhost:9876/node_modules/@nebular/theme/components/cdk/adapter/overlay-container-adapter.js?:44:1)
    at NbOverlayContainerAdapter.push../node_modules/@angular/cdk/esm5/overlay.es5.js.OverlayContainer.getContainerElement (http://localhost:9876/node_modules/@angular/cdk/esm5/overlay.es5.js?:831:1)
    at NbOverlay.push../node_modules/@nebular/theme/components/cdk/overlay/mapping.js.NbOverlay.createHostElement (http://localhost:9876/node_modules/@nebular/theme/components/cdk/overlay/mapping.js?:168:1)
    at NbOverlay.push../node_modules/@nebular/theme/components/cdk/overlay/mapping.js.NbOverlay.create (http://localhost:9876/node_modules/@nebular/theme/components/cdk/overlay/mapping.js?:143:1)
    at NbOverlayService.push../node_modules/@nebular/theme/components/cdk/overlay/overlay.js.NbOverlayService.create (http://localhost:9876/node_modules/@nebular/theme/components/cdk/overlay/overlay.js?:36:1)
    at NbSelectComponent.push../node_modules/@nebular/theme/components/select/select.component.js.NbSelectComponent.createOverlay (http://localhost:9876/node_modules/@nebular/theme/components/select/select.component.js?:349:1)
    at NbSelectComponent.push../node_modules/@nebular/theme/components/select/select.component.js.NbSelectComponent.ngOnInit (http://localhost:9876/node_modules/@nebular/theme/components/select/select.component.js?:234:1)
    at checkAndUpdateDirectiveInline (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:22001:1)
    at checkAndUpdateNodeInline (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:23265:1)
    at checkAndUpdateNode (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:23227:1)

编辑：

export var testBed = {
    imports: [
        BrowserModule, HttpModule, JsonpModule, AppRoutingModule, FormsModule, ReactiveFormsModule, Ng2PaginationModule, Ng2OrderModule, HttpClientModule, BrowserAnimationsModule,
        NbThemeModule.forRoot(),
        NbMenuModule.forRoot(),
        NbWindowModule.forRoot(),
        NbLayoutModule, NbSidebarModule, NgbTimepickerModule, NbWindowModule, NbRadioModule, NbCheckboxModule, NbCardModule, NbUserModule, NbTabsetModule, Ng2SmartTableModule, NbAlertModule, NbButtonModule, NbInputModule, NbSelectModule
    ],
    declarations: [ CenterPricesComponent, AppComponent, UsersComponent, ReservationsComponent, UserProfileComponent, EventsComponent, EventDetailComponent, LoginComponent, DatePipe, HomeComponent, DashboardComponent, 
        ReservationDetailComponent, CentersComponent, CenterDetailComponent, CenterFacilitiesComponent, CenterAddressComponent, CenterInfosComponent, CenterDescriptionComponent, CenterAmenitiesComponent],
    providers: [{provide: APP_BASE_HREF, useValue : '/' }, UserService, ReservationService, AuthGuard, AuthService, EventService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi: true,
        }
        , NbSidebarService, CentersService, AddressService, AmenityService],
    bootstrap: [AppComponent]
}