在 NgRX createEffect 调用中模拟 catchError答案

【问题标题】：Mock catchError in NgRX createEffect call在 NgRX createEffect 调用中模拟 catchError
【发布时间】：2021-09-04 17:18:22
【问题描述】：

我目前正在为以下调度事件编写测试：

@Injectable()
export class AuthEffects {
  signIn$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AuthActions.signIn),
      switchMap((action) =>
        from(this.loginService.signIn(action.email, action.password, action.redirectTo)).pipe(
          map(() => AuthActions.signInSuccess()),
          catchError((err: Error) =>
            of(
              AuthActions.signInError({
                message: err.message,
              })
            )
          )
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private loginService: LoginService
  ) {}
}

测试如下：

describe('AuthEffects', () => {
  let effects: AuthEffects;
  let actions$: Observable<Action>;
  let mockLoginService: LoginService;
  let mockSupabaseService: SupabaseService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [provideMockActions(() => actions$), AuthEffects],
    });
    effects = TestBed.inject(AuthEffects);
    mockLoginService = TestBed.inject(LoginService);
    mockSupabaseService = TestBed.inject(SupabaseService);
  });
  describe('signIn$', () => {
    it('should allow sign in', () => {
      const payload = { email: 'test@hotmail.com', password: '123', redirectTo: 'dashboard' };
      actions$ = cold('a', { a: AuthActions.signIn(payload) });
      jest.spyOn(mockSupabaseService, 'signIn').mockImplementation(() => Promise.resolve([]));
      effects.signIn$.subscribe(() => {
        expect(mockLoginService.signIn).toHaveBeenCalled();
      });
    });

    it('should not allow sign in', () => {
      const payload = { email: 'test@hotmail.com', password: '123', redirectTo: 'dashboard' };
      const mockError = { name: 'test', message: 'test' };
      actions$ = cold('a', { a: AuthActions.signIn(payload) });
      jest.spyOn(mockSupabaseService, 'signIn').mockImplementation(() => {
        return Promise.reject(mockError);
      });
      effects.signIn$.subscribe(() => {
        expect(mockLoginService.signIn).toHaveBeenCalled();
      });
    });
  });
});

我在模拟 catchError 方法覆盖所需的输出时遇到问题。每次运行测试时，都会出现以下错误：

console.error
Unhandled Promise rejection: { name: 'test', message: 'test' } ; Zone: ProxyZone ; Task: null ; Value: { name: 'test', message: 'test' } undefined

我该如何解决这个问题？

【问题讨论】：

标签： javascript angular typescript jestjs ngrx

【解决方案1】：

让您的 signIn 模拟呼叫 rxjs throwError 运算符：

jest.spyOn(mockSupabaseService, 'signIn').mockImplementation(() => throwError(mockError));

【讨论】：