使用 ngxs/store @select 进行 Angular Testing 会给出错误 : "SelectFactory not connected to store!"

Question

该项目正在运行，没有错误。但是所有测试都失败了，“SelectFactory 未连接到商店!”。在我们将 Observables 分解为基类之前，它是有效的。

我可以 stub 基类吗？ stub @Select？ stub 商店？在@Select 旁边使用一些东西？

我需要它来继续收听 store observables。它需要扩展基类。其他一切都悬而未决。

套餐:

"@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();
    });
});

Answer 1

我在以下位置找到了一些建议:
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 装饰器的组件属性:

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

我希望这有帮助。