Ngrx 单元测试效果

Question

我在单元测试 ngrx 效果上有奇怪的错误，这是我的例子

export const noop = (): any => null;
export const obsNoop = () => of({});
export const mockObs = () => {
  return {
    subscribe: () => { }
  };
};

const initialState: Tutorial[] = [
  { id: 1, name: 'Google', url: 'google.com' },
  { id: 2, name: 'Yahoo', url: 'yahoo.com' },
];

class MockTutorialsService {
  getAll = obsNoop;
}

fdescribe('AppEffects', () => {
  let actions$: Observable<any>;
  let effects: TutorialEffects;
  let store: MockStore<AppState>;
  let httpService: TutorialsService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        TutorialEffects,
        provideMockActions(() => actions$),
        provideMockStore({ initialState }),
        { provide: TutorialsService, useClass: MockTutorialsService }
      ],
    });

    effects = TestBed.inject(TutorialEffects);
    store = TestBed.inject(MockStore);
    httpService = TestBed.inject(TutorialsService);
  });

  it('should be created', () => {
    expect(effects).toBeTruthy();
  });

  // Testing API interaction
  describe('onFetchUsers$', () => {
    it('should fire if users is null', (done) => {
      const spy = spyOn(httpService, 'getAll').and.callThrough();
      actions$ = of(TutorialActions.GET_TUTORIALS);
      effects.loadTutorials$.subscribe((res) => {
        expect(res).toEqual(new TutorialActions.SuccesGetTutorials(res));
        expect(spy).toHaveBeenCalledTimes(1);
        done();
      });
    });
  });
});

我得到的错误与业力likeError有关： 超时 - 异步函数未在 5000 毫秒内完成（由 jasmine.DEFAULT_TIMEOUT_INTERVAL 设置）此

有人知道我哪里出错了吗？

这里是特效

Injectable()
export class TutorialEffects {
  loadTutorials$ = createEffect(() =>
    this.action$.pipe(
      ofType(TutorialActions.GET_TUTORIALS),
      switchMap(() =>
        this.tutorialService.getAll().pipe(
          map((tutorial: Tutorial[]) => new TutorialActions.SuccesGetTutorials(tutorial)),
          catchError((error) => of(error))
        )
      )
    )
  );


  constructor(private action$: Actions, private tutorialService: TutorialsService) { }
}

Answer 1

在没有看到效果的情况下，我在猜测，但问题是测试没有进入 effects.loadTutorials$.subscribe 行内并在 5 seconds 内调用 done。

effects.loadTutorials$.subscribe((res) => {
        console.log('!! Inside of the subscribe !!'); // make sure you see this log
        expect(res).toEqual(new TutorialActions.SuccesGetTutorials(res));
        expect(spy).toHaveBeenCalledTimes(1);
        done();
      });

我认为罪魁祸首是and.callThrough()。我认为你应该返回一个虚假的响应。

const spy = spyOn(httpService, 'getAll').and.returnValue(of({/* mock response */ });

====== 编辑 ======

  loadTutorials$ = createEffect(() =>
    this.action$.pipe(
      ofType(TutorialActions.GET_TUTORIALS),
      switchMap(() => {
        console.log('!! Inside of switchMap !!');
        return this.tutorialService.getAll().pipe(
          map((tutorial: Tutorial[]) => { 
           console.log('!! Inside of map !!');
           return new TutorialActions.SuccesGetTutorials(tutorial); }),
          catchError((error) => of(error))
        )
      })
    )
  );