Angular13中Jest测试响应式表单resetForm方法的正确方式

你的测试写法存在问题 #

不管是最初的测试还是更新后的版本，都有错误：

• 原始测试里，form.get('a')返回的是FormControl实例对象，不是字段的值，所以直接断言toBe('')完全不对，应该取控件的value属性来判断。
• 更新后的测试里，手动调用form.markAsUntouched()和form.markAsPristine()是多余的——reset()方法本身就会把控件状态重置为pristine（未修改）和untouched（未触碰），你手动调用会覆盖reset的真实效果，导致测试结果失真。另外，断言form.get('a')为null也是错误的，因为你的表单里明确定义了a字段，这个方法返回的是控件对象，不会是null。

表单字段重置后的值 #

你创建FormControl时没有指定初始值（new FormControl()），所以调用reset()后，字段的value会变成null，同时控件的dirty状态变为false，touched状态也变为false。如果创建时指定了初始值（比如new FormControl('default')），reset后会回到这个初始值。

正确的测试代码示例 #

测试前要先给字段设值、标记为已修改/已触碰，这样才能验证reset方法确实起作用：

it('resets specified form fields correctly', () => {
  const form = component.myForm;
  // 先给字段赋值并标记状态，模拟用户操作后的表单
  form.get('a')?.setValue('测试值A');
  form.get('b')?.setValue('测试值B');
  form.get('c')?.setValue('测试值C');
  form.markAllAsTouched();
  form.markAsDirty();

  // 调用待测试的resetForm方法
  component.resetForm();

  // 断言字段值被重置
  expect(form.get('a')?.value).toBeNull();
  expect(form.get('b')?.value).toBeNull();
  expect(form.get('c')?.value).toBeNull();

  // 断言控件状态被重置
  expect(form.get('a')?.pristine).toBe(true);
  expect(form.get('a')?.touched).toBe(false);
  expect(form.get('b')?.pristine).toBe(true);
  expect(form.get('b')?.touched).toBe(false);
  expect(form.get('c')?.pristine).toBe(true);
  expect(form.get('c')?.touched).toBe(false);
});

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