使用ngxs / store @select进行角度测试会产生错误:“ SelectFactory未连接到存储!”

时间:2019-09-06 20:15:35

标签: angular unit-testing ngrx-store

项目正在运行,没有错误。但是所有测试都失败,并显示“ SelectFactory未连接到存储!”。在我们将Observables推广到基类之前,它已经在起作用。

我可以对基类存根吗?存根@选择吗?存根吗?在@Select旁边使用其他内容?

我需要它来继续聆听商店的观察数据。并且它需要扩展基类。其他一切都悬而未决。

包装:

"@angular/core": "7.2.11",
"@ngxs/store": "^3.4.3"

组件

@Component({
    selector: "app-billing-landing",
    templateUrl: "./billing-landing.component.html",
    styleUrls: ["./billing-landing.component.scss"],
    animations: [fadeInRightLeft]
})
export class BillingLandingComponent extends BillingCore implements OnInit {
    constructor(public dialog: MatDialog, public router: Router) {
        super(router, dialog);    
    }
    ....Other Methods
}

基本组件

@NgModule()
export class BillingCore {
    @Select(AccountState.getCurrentPatient) currentPatient$: Observable<ProxySwitchUser>;
    @Select(AccountState.getLoggedInUser) loggedInUser$: Observable<Patient>;

    constructor(public router: Router, public dialog: MatDialog) {

        combineLatest([this.currentPatient$, this.loggedInUser$]).subscribe(dataArray => {
            ....Do Stuff
        });
    }
    ....Other Methods
}

测试文件

describe("BillingLandingComponent", () => {
    let component: BillingLandingComponent;
    let fixture: ComponentFixture<BillingLandingComponent>;
    const matDialogServiceSpy = jasmine.createSpyObj("MatDialog", ["open"]);

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [JssModule.forRoot(), RouterTestingModule, NoopAnimationsModule],
            declarations: [BillingLandingComponent],
            providers: [{ provide: MatDialog, useValue: matDialogServiceSpy }],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        });

        fixture = TestBed.createComponent(BillingLandingComponent);
        component = fixture.componentInstance;

        Object.defineProperty(component, "currentPatient$", { writable: true });
        Object.defineProperty(component, "loggedInUser$", { writable: true });
        component.currentPatient$ = of(mockPatient as Patient);
        component.loggedInUser$ = of(mockPatient as Patient);


        fixture.detectChanges();
    }));

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

1 个答案:

答案 0 :(得分:2)

我在以下位置找到了一些建议: https://github.com/ngxs/store/issues/482

此解决方案背后的原因是,组件的单元测试不应测试与Ngxs相关的功能(例如@Select装饰器)。

从那里复制了对我有帮助的答案(以防链接过时):

beforeEach(() => {  
   fixture = TestBed.createComponent(RequestStartAllowanceComponent);
   component = fixture.componentInstance;  
   Object.defineProperty(component, 'prop$', { writable: true });  
   component.prop$ = of('value');  
   fixture.detectChanges();  

});

因此,prop$是使用选择装饰器的组件属性:

@Select(state=>state.someStateValue) prop$: Observable;

我希望这会有所帮助。