笑话：模拟 RxJs 管道

Question

如何模拟更复杂的 RxJs 行为（在 NgRx 的上下文中）？

给定一个简单的组件（SomeComponent）：

export class SomeComponent implements OnInit {
  foo$: Observable<any>;
  bar$: Observable<any>;

  constructor(private store: Store<State>) {}

  ngOnInit() {
    this.foo$ = this.store.pipe(select(getFooSelector));
    this.bar$ = this.store.pipe(select(getBarSelector));
  }
}

我想以一种方式模拟商店：

• 根据传递的选择器，模拟存储返回不同的值。
• 窥探将哪个参数（选择器）传递给select 运算符。

根据传递的选择器，模拟存储返回不同的值

我会认为它是这样的：

store.pipe = jest.fn(selectOperator => {
  switch (selectOperator.arguments[0]) {
    case getFooSelector:
      return foo;
    case getBarSelector:
      return bar;
  }
}

窥探将什么参数（选择器）传递给select 运算符。

类似的东西：

const spy = jest.spyOn(store, 'pipe');
expect(spy.mock.calls[0]).toHaveBeenCalledWith(select(getFooSelector));
expect(spy.mock.calls[1]).toHaveBeenCalledWith(select(getBarSelector));

总结

我知道这两个示例都是伪代码，但我希望它们能证明我想要实现的目标。如果我的方法完全错误，请对此发表评论。

Answer 1

使用 NGRX v8.6.0，您应该能够执行以下操作：

let fixture: ComponentFixture<SomeComponent>;
let mockStore: MockStore<State>;

beforeEach(() => {
    TestBed.configureTestingModule({
        providers: [provideMockStore()],
        declarations: [SomeComponent],
    });

    fixture = TestBed.createComponent(SomeComponent);
    mockStore = TestBed.get(Store);
    fixture.detectChanges();
});

it('should have a value of foo', done => {
    mockStore.overrideSelector(getFooSelector, 'foo');

    foo$.subscribe(res => {
        done();
        expect(res).toBe('foo');
    });
});

it('should have a value of bar', done => {
    mockStore.overrideSelector(getBarSelector, 'bar');

    bar$.subscribe(res => {
        done();
        expect(res).toBe('bar');
    });
});

https://ngrx.io/guide/store/testing

Answer 2

使用RxJs Marbles 使用 NgRx 测试 RxJ。

欲了解更多信息，请阅读RxJS Marble Testing: RTFM 并查看Jest Testing - Jesse Sanders、Reactive Testing Strategies with NgRx - Brandon Roberts & Mike Ryan

实现使用jest.fn().mockImplementationOnce

store.pipe = jest.fn()
   .mockImplementationOnce(foo)
   .mockImplementationOnce(bar)

expect(store.pipe).toHaveBeenCalledWith(select(getFooSelector));
expect(store.pipe).toHaveBeenCalledWith(select(getBarSelector));