如何测试含返回Observable的自定义异步验证器的响应式表单验证错误？

这种情况我之前也碰到过！核心问题就是异步验证器的Observable是异步执行的，而你的测试代码默认是同步跑的——你调试时看到验证器返回了正确值，但那是在测试断言之后才完成的，所以断言的时候控件状态还没更新，自然会显示有效。

下面给你两种可靠的测试方案，结合示例代码来讲解：

先准备前提代码（模拟你的场景） #

假设你的自定义异步验证器是用来检查用户名是否重复的，大概长这样：

// username-exists.validator.ts
import { AsyncValidatorFn, AbstractControl } from '@angular/forms';
import { UserService } from './user.service';
import { map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

export function usernameExistsValidator(userService: UserService): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return userService.checkUsername(control.value).pipe(
      // 用户名存在则返回错误对象，否则返回null
      map(exists => exists ? { usernameExists: '该用户名已被占用' } : null),
      catchError(() => of(null))
    );
  };
}

方案1：用fakeAsync + tick（推荐，更直观） #

fakeAsync可以让你在同步的测试代码里模拟异步操作，tick()会触发所有待处理的异步任务完成。

// username-exists.validator.spec.ts
import { fakeAsync, tick, TestBed } from '@angular/core/testing';
import { FormControl } from '@angular/forms';
import { usernameExistsValidator } from './username-exists.validator';
import { UserService } from './user.service';
import { of } from 'rxjs';

describe('usernameExistsValidator', () => {
  let userServiceSpy: jasmine.SpyObj<UserService>;
  let validator: AsyncValidatorFn;

  beforeEach(() => {
    // 先创建UserService的mock对象，模拟checkUsername方法
    const spy = jasmine.createSpyObj('UserService', ['checkUsername']);

    TestBed.configureTestingModule({
      providers: [{ provide: UserService, useValue: spy }]
    });

    userServiceSpy = TestBed.inject(UserService) as jasmine.SpyObj<UserService>;
    validator = usernameExistsValidator(userServiceSpy);
  });

  it('验证器返回错误时，控件应变为无效并包含预期错误', fakeAsync(() => {
    // 1. 模拟服务返回"用户名已存在"
    userServiceSpy.checkUsername.and.returnValue(of(true));

    // 2. 创建表单控件并触发验证
    const control = new FormControl('test-user');
    validator(control);

    // 3. 触发所有异步任务完成（关键！）
    tick();

    // 4. 断言控件状态
    expect(control.invalid).toBeTrue();
    expect(control.hasError('usernameExists')).toBeTrue();
    expect(control.getError('usernameExists')).toBe('该用户名已被占用');
  }));

  it('验证器返回null时，控件应保持有效', fakeAsync(() => {
    userServiceSpy.checkUsername.and.returnValue(of(false));

    const control = new FormControl('new-user');
    validator(control);

    tick();

    expect(control.valid).toBeTrue();
    expect(control.hasError('usernameExists')).toBeFalse();
  }));
});

方案2：用async + whenStable #

如果你的验证器里有更复杂的异步逻辑（比如依赖HTTP请求的真实调度），可以用async包裹测试函数，然后通过whenStable()等待所有异步操作完成：

it('验证器返回错误时，控件应变为无效并包含预期错误', async(() => {
  userServiceSpy.checkUsername.and.returnValue(of(true));

  const control = new FormControl('test-user');
  validator(control);

  // 等待所有异步任务稳定
  await TestBed.whenStable();

  expect(control.invalid).toBeTrue();
  expect(control.hasError('usernameExists')).toBeTrue();
}));

关键注意点 #

1. 必须等待异步完成：不管用哪种方案，一定要确保测试代码等待验证器的Observable执行完成，否则断言会早于验证结果更新。
2. 正确模拟依赖服务：确保你的mock服务返回的Observable是正确的（比如of(true)触发错误，of(false)返回有效）。
3. 处理防抖等延迟：如果你的验证器用了debounceTime(300)，那tick()需要传入对应时间，比如tick(300)，否则不会触发验证。

内容的提问来源于stack exchange，提问作者boris