angular - Jest : mock RxJs pipe

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

使用RxJs Marbles用于使用 NgRx 测试 RxJs。

有关更多信息，请阅读 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));