Question

鉴于订阅了一个observable的以下组件（在app中运行良好），在尝试通过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),

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

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

    }));

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

1 个答案: