Jest.js 测试重置时要作废的React式表单

ijxebb2r  于 2022-12-08  发布在  Jest
关注(0)|答案(1)|浏览(167)

我目前正在做一个用Angular13做的项目,由于这周没有更多的工作要做,我决定用Jest做一些单元测试,以提高我的编码技能。
在这个例子中,我想测试一个方法reset(),正如它的名字所说,它重置了表单,但是我找不到测试它的方法。
我提供一些代码:

组件.ts

this.myForm= this.fb.group({
      a: new FormControl(),
      b: new FormControl(),
      c: new FormControl(),
    });

// Clean form
  resetForm() {
    this.myForm.get('a')?.reset();
    this.myForm.get('b')?.reset();
    this.myForm.get('c')?.reset();
  }

(我知道您可以使用this.myForm.reset重置所有表单,但我简化了代码片段,因为我只想重置一些特定字段,而不是所有表单)

组件规格ts

it('resets form', () => {
    const form = component.myForm;
    component.resetForm()
    expect(form.get('a')).toBe('')
    expect(form.get('b')).toBe('')
    expect(form.get('c')).toBe('')
  })

我做得正确吗?当字段被重置时,它的值应该是什么?

[更新]

it('reset form', () => {
    const form = component.myForm;
    form.markAllAsTouched()
    form.markAsDirty()
    component.resetForm()
    form.markAsUntouched()
    form.markAsPristine()

    expect(form.get('a')).toBe(null)
    expect(form.get('b')).toBe(null)
    expect(form.get('c')).toBe(null)
  })
mdfafbf1

mdfafbf11#

重置字段后,该字段的值应该是什么?
这归结为表单的实现/初始化。
form.reset())重置FormGroup,将所有后代标记为原始未触及,并将所有后代的值设置为它们的默认值null(如果未提供默认值)。
为了测试你的方法,你应该将表单设置为dirty和touched,并给它打上一些值。然后,一旦完成,检查字段是否是pristineintactednull(假设你的例子没有默认值)。

相关问题