unit-testing - 模拟 ngrx/store

Question

这是关于 Angular 2 官方发布的。我知道单元测试在 beta、RC 和正式版本之间发生了巨大变化。

当 @ngrx/store 用作构造函数中的参数时，在单元测试中模拟 @ngrx/store 的好方法是什么？这不像模拟服务那么简单。

例如，如果我想模拟一个服务，那么我可以这样做:

let serviceStub = { }; // not a true mocked service, just a stub, right?

let de: DebugElement;
let el: HTMLElement;
let nativeEl: Element;
let comp: Typeahead;
let fixture: ComponentFixture<Typeahead>;

describe('Component:Typeahead', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [...],
            declarations: [Typeahead],
            providers: [
                {provide: TypeaheadService, useValue: serviceStub} // provides the service that is being "mocked"
            ]
        }).compileComponents();

        fixture = TestBed.createComponent(Typeahead);
        nativeEl = fixture.nativeElement;
        comp = fixture.componentInstance;
        de = fixture.debugElement;
    });
});

这行得通。

但是，对于 ngrx/store，它不会(如果您将 Store in 替换为 TypeaheadService)。我认为您必须编写一个扩展 Store 的模拟类，然后将其提供给正在测试的组件，但我不确定为什么会这样(如果是这样的话)。

我只是对如何在我的单元测试中模拟 ngrx/store 感到困惑，并且在他们的网站或 github 上找不到任何文档。也许我忽略了它。

Answer 1

感谢您提出问题并提出可能的解决方案!

我模拟它的方式是，使用实际操作来设置初始状态，即每次测试前的模拟状态。这是一个例子

beforeEach(inject([Store], (store: Store<ApplicationState>) => {
const someFakeState = {
    counter: 9,
    counterFilter: 'A_FAKE_COUNTER_FILTER'
};

store.dispatch(new myActionToSetSomeData(someFakeState));
}));

在您的 it() block 中，您现在应该能够检查该组件是否显示计数 9 以及是否通过 'A_FAKE_COUNTER_FILTER' 进行过滤。

你当然可以在你的 it block 中设置状态，而不是 beforeEach，只要它在组件被实例化之前。