Angular 测试因 takeWhile() 而失败

Question

我有一个组件在使用 select 订阅 NgRx reducer 时使用 takeWhile()。因此：

    this.store.pipe(select(reducer.getProviders))
            .takeWhile( ... )
            .subscribe(providers => {
                ...
            });

现在我想为它编写测试。目前还很基础：

    import { StoreModule, Store, Action, select, combineReducers } from '@ngrx/store';
    import { Subject } from 'rxjs/Subject';

    import * as reducer from './../../reducers';

    describe('ProviderComponent', () => {
        let component: ProviderComponent;
        let fixture: ComponentFixture<ProviderComponent>;
        let store: Store<reducer.State>;

        beforeEach(async(() => {
            const actions = new Subject<Action>();
            const states = new Subject<reducer.State>();
            store = mockStore<reducer.State>({ actions, states });

            TestBed.configureTestingModule({
                imports: [
                    StoreModule.forRoot({
                        provider: combineReducers(reducer.reducers)
                    }),
                    ...
                ],
                declarations: [
                    ProviderComponent
                ],
                providers: [
                    { provide: Store, useValue: store },
                    { provide: HAMMER_LOADER, useValue: () => new Promise(() => { return; }) }
                ]
            })
            fixture = TestBed.createComponent(ProviderComponent);
            component = fixture.componentInstance;
            component.providerCtrl = new FormControl();
            spyOn(store, 'dispatch').and.callThrough();
        }));

        describe('When provider is rendered', () => {
            beforeEach(() => {
                fixture.detectChanges();
            });

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

            it('store to be defined', async(() => {
                expect(store).toBeDefined();
            }));
        });
    });

但是当我运行它时，我得到这个错误：

TypeError: this.store.pipe(...).takeWhile is not a function

不知道怎么导入！谁能帮我解决这个问题？

Answer 1

need to import takewhile operator in component

import 'rxjs/add/operator/takeWhile';

for rxjs 5.5 above use below statement

import { takeWhile } from 'rxjs/operators';

Answer 2

takeWhile 是一个管道运算符，应该包含在管道中：

this.store.pipe(
   select(reducer.getProviders),
   takeWhile( ... ) 
).subscribe(providers => {
    ...
});

Angular 测试因 takeWhile() 而失败

Angular tests fail with takeWhile()

angular

rxjs

ngrx

ngrx-store