茉莉花测试中的组件创建失败

Question

鉴于以下订阅 observable 的组件（在应用程序中运行良好），尝试通过 jasmine/karma 创建组件时失败。

未捕获的错误：./MappingComponent 类 MappingComponent 中的错误 - 内联模板：0:5 原因：无法读取属性“mapCursorClass” 未定义的 在 ViewWrappedError.ZoneAwareError (http://localhost:9876/base/src/test.ts:84141:33)

这与他的可观察性有关。如果这只是一个字符串，那就不用麻烦了：

    /**
     * Container component that composes the mapping toolbar (pan, zoom, drag, draw, measure etc)
     * and the mapping provider (underlying 3rd party mapping display engine - Leaflet, OpenLayers etc)
    */
    @Component({
        selector: 'mapping-component',
        //templateUrl: './mapping.component.html',
        template: '<div [ngClass]="mapCursorClass | async"></div>',
        styleUrls: ['./mapping.component.css']
    })
    export class MappingComponent extends events.EventEmitter {
        mapContainerElementId = "map-container";
        private mapCursorClass : Observable<string>;

        constructor(
            MappingProviders.MappingProvider,
            public mappingProvider: LeafletMappingProvider,
            private store: Store<fromRoot.State>,
            private mapLayerService: MapLayerService,
            private organisationService: OrganisationService,
            private projectService: ProjectService
        ) {
            super();


            this.mapCursorClass = this.store.select(fromRoot.getMapCursor); // bound to the html
        }

和规格：

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

        // Add the imported module to the imports array in beforeEach 
        beforeEach(async(() => {
            TestBed.configureTestingModule({
                imports: [
                        AppModule,
                        StoreModule.provideStore({})
                    ]//,
                    //declarations: [MappingComponent]
                })
                .compileComponents();

        }));

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

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

Answer 1

原来是这个问题

StoreModule.provideStore({})

正如它所期望的 @ngrx/store reducer，AppModule 实际上是这样做的：

import { reducer } from './app.reducer';
...
imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        /**
         * StoreModule.provideStore is imported once in the root module, accepting a reducer
         * function or object map of reducer functions. If passed an object of
         * reducers, combineReducers will be run creating your application
         * meta-reducer. This returns all providers for an @ngrx/store
         * based application.
        */
        StoreModule.provideStore(reducer),

从夹具中删除该行是修复（或者我可以重新引入组件，使用正确的减速器修复该行并删除 AppModule 导入）：

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                StoreModule.provideStore(reducer)
            ],
            declarations: [MappingComponent]
        })
        .compileComponents();

    }));