如何对 NgRx 选择器可观察对象进行单元测试

Question

我正在尝试覆盖 NgRx 选择器并从 observable 输出覆盖的值。

在我看来，对 overrideSelector() 的调用没有按我的预期工作。当我测试 observable 时，此覆盖的结果不会反映在最终断言中。

鉴于以下最小复制示例，我如何才能通过此测试？

import { TestBed } from '@angular/core/testing';
import { MockStore, provideMockStore } from '@ngrx/store/testing';
import { cold } from 'jest-marbles';
import { createFeatureSelector, createSelector, select } from '@ngrx/store';

let store: MockStore<any>;

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [],
    providers: [provideMockStore({ initialState: { feature: { myValue: 'initial value' } } })]
  });

  store = TestBed.inject(MockStore);
});

it('should emit the overridden selector value', () => {
  const featureSelector = createFeatureSelector<any>('feature');
  const mySelector = createSelector(featureSelector, (state: any) => state.myValue);
  const myObservable$ = store.pipe(select(mySelector));

  store.overrideSelector(mySelector, 'some new value');
  store.refreshState();

  const expected = cold('a', { a: 'some new value' });
  expect(myObservable$).toBeObservable(expected); // Fails.  The emmitted value is still 'initial value'
});

作为一个有趣的附注。如果我在测试中实际订阅了 myObservable$，那么发出的值就是我所期望的。

  myObservable$.subscribe((val) => {
    console.log(val); // logs: 'some new value'
  });

对于一些额外的上下文，这是一个最小的复制。我实际上有一个服务，它公开了 myObservable$ 的等价物。在内部，这个 observable 被连接为一个存储选择器（几乎和这里一样，但有点复杂）。我正在尝试测试此服务，特别是检查暴露的 myObservable$ 在特定商店安排下的行为是否正确。

Answer 1

虽然这不是您问题的直接答案，但此测试不会增加任何价值。

您正在创建一个选择器，模拟选择器，然后测试选择器是否返回模拟值。

我正在尝试测试此服务，特别是检查暴露的 myObservable$ 在特定商店安排下的行为是否正确。

当您模拟选择器时，它不会查看存储安排 - 它只是返回模拟的返回值。

如果你想测试一个选择器，最简单的方法是使用项目方法。 请参阅我的博文How I test my NgRx selectors 或docs 了解更多信息。