在单元测试中调度输入事件时，永远不会触发表单的值更改答案

【问题标题】：Value changes of a form is never triggered when dispatching an input event in a unit test在单元测试中调度输入事件时，永远不会触发表单的值更改
【发布时间】：2021-04-26 20:51:57
【问题描述】：

我正在尝试测试当我在输入中键入时表单上的值是否发生了变化。项目使用的是nrwl nx，测试工具是开玩笑的。

组件：

export class InputNumericComponent implements OnInit, OnDestroy {

  @Input() form: FormGroup;

  @Input() controlName: string; 

  private _changeSubscription: Subscription;

 private get _control(): AbstractControl | null {
    return this.form?.get(this.controlName);
  }

  public ngOnInit(): void {
    if (!this._control) {
       return;
    }
    console.log('init called'); // ok
    this._changeSubscription = this._control.valueChanges
      .pipe(tap((newValue) => this._handleChange(newValue)))
      .subscribe();
  }

  public ngOnDestroy(): void {
    if (this._changeSubscription) {
      this._changeSubscription.unsubscribe();
    }
  }

  private _handleChange(value: string): void {
    console.log('_handleChange'); // never called
  }

  public handleBlur(): void {
    console.log('handleBlur'); // can be called by using dispatchEvent(new Event('blur'));
  }
}

测试文件：

describe('InputNumericComponent', () => {
  let component: InputNumericComponent;
  let fixture: ComponentFixture<InputNumericComponent>;

  configureTestSuite(() => {
    TestBed.configureTestingModule({
      declarations: [InputNumericComponent],
      schemas: [NO_ERRORS_SCHEMA],
    });
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(InputNumericComponent);
    component = fixture.componentInstance;
    component.controlName = 'numeric';
    component.form = new FormGroup({
      numeric: new FormControl(),
    });
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should update form', fakeAsync(() => {
    component.ngOnInit();
    const input = fixture.debugElement.query(By.css('input'));
    input.nativeElement.value = '222';
    // i tried both and others like keydown, keypress, etc..
    input.nativeElement.dispatchEvent(new Event('change'));
    input.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    tick();
    console.log('form', component.form.get('numeric')?.value); // null
    expect(input.form.get('numeric')).toEqual('222');
  }));
});

我不知道为什么但是输入事件不会触发valueChanges，如果我调度blur 事件会调用handleBlur 函数但我不知道如何触发valueChanges ，我试过keydown，keypress。

我尝试直接在输入上分派输入事件并且它有效，_handleChange 被调用但不知道为什么在测试中它不起作用。

我尝试过使用fixture.nativeElement.querySelector('input') 的另一种方法，但它也不起作用。

我做错了什么？

【问题讨论】：

标签： angular typescript unit-testing jestjs nrwl-nx

【解决方案1】：

将 ReactiveFormsModule 添加到您的 TestBed 导入中。

【讨论】：

我已经尝试过了，但它也不起作用，我没有看到我在帖子中使用了change 事件，但最初我使用的是input，但它不起作用..
@JulienMETRAL 您可以尝试在 TestBed 导入中添加 ReactiveFormsModule 吗？
有效！多谢！您可以编辑您的答案，我会接受并将其标记为正确