Angular单选组[(ngModel)]值在Jasmine测试中不更新问题排查

我在组件中使用了以下HTML代码：

<mat-radio-group aria-label="Select an option" [(ngModel)]="searchType" (change)="changeSearchType()" class="form-row">
        <mat-radio-button [value]="searchByUserType" class="mr-5 max-w-1/2 flex-1">{{'CONTENT.Search by User' | translate
            }}</mat-radio-button>
        <mat-radio-button [value]="searchByRegType" class="max-w-1/2 flex-1">{{'CONTENT.Search by Reg' | translate
            }}</mat-radio-button>
    </mat-radio-group>

同时编写了如下Jasmine测试代码：

it('should select the correct value for the radio buttons', () => {
      const radioGroupDebugElement = fixture.debugElement.query(By.css('mat-radio-group'));
      const radioButtons = radioGroupDebugElement.queryAll(By.css('mat-radio-button'));
  
      // Simulate user selecting the first radio button
      radioButtons[0].nativeElement.click();
      console.log(radioButtons[0].nativeElement.value);
      fixture.detectChanges();
  
      // Manually dispatch a change event
      radioGroupDebugElement.nativeElement.dispatchEvent(new Event('change'));
      fixture.detectChanges();
      expect(component.searchType).toBe(component.searchByUserType);
  
      // Simulate user selecting the second radio button
      radioButtons[1].nativeElement.click();
      fixture.detectChanges();
  
      // Manually dispatch a change event
      radioGroupDebugElement.nativeElement.dispatchEvent(new Event('change'));
      fixture.detectChanges();
      expect(component.searchType).toBe(component.searchByRegType);
  
    });

测试失败，报错信息为“Expected undefined to be 'SearchByUser'. ”和“Expected undefined to be 'SearchByReg'. ”，单选按钮的值在测试中未被正确捕获，请问遗漏了什么？

问题原因及修复方案 #

1. 组件核心属性未初始化 #

测试执行前，必须确保组件内的searchByUserType、searchByRegType、searchType这几个属性已经完成赋值，否则测试时这些值默认是undefined，自然无法匹配预期结果。在beforeEach中添加初始化代码：

beforeEach(() => {
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  // 赋值要和组件内实际定义的取值保持一致
  component.searchByUserType = 'SearchByUser';
  component.searchByRegType = 'SearchByReg';
  component.searchType = ''; // 初始值根据业务需求设置
  fixture.detectChanges();
});

2. 直接操作原生DOM无法触发Material组件逻辑 #

Angular Material的mat-radio-button有内部封装的选中状态管理逻辑，直接点击原生DOM元素不会正确同步组件的ngModel绑定。需要通过组件实例来模拟选中操作：

// 替换原生click，改用组件实例设置选中并触发事件
const firstRadioComp = radioButtons[0].componentInstance;
firstRadioComp.checked = true;
firstRadioComp.change.emit();
fixture.detectChanges();

3. 手动触发的空事件无法携带选中值 #

你手动创建的new Event('change')是不包含任何数据的空事件，Angular无法通过这个事件更新ngModel。要么使用组件自身的change事件（如上面的方法），要么构造携带选中值的自定义事件：

radioGroupDebugElement.nativeElement.dispatchEvent(new CustomEvent('change', {
  detail: { value: component.searchByUserType }
}));

4. 无需重复触发change事件 #

如果已经通过组件实例调用了change.emit()，Angular的变更检测机制会自动同步ngModel的值，不需要再手动触发radio group的change事件。

修复后的完整测试代码示例：

it('should select the correct value for the radio buttons', () => {
  const radioButtons = fixture.debugElement.queryAll(By.css('mat-radio-button'));

  // 选中第一个单选按钮
  const firstRadio = radioButtons[0].componentInstance;
  firstRadio.checked = true;
  firstRadio.change.emit();
  fixture.detectChanges();
  expect(component.searchType).toBe(component.searchByUserType);

  // 选中第二个单选按钮
  const secondRadio = radioButtons[1].componentInstance;
  secondRadio.checked = true;
  secondRadio.change.emit();
  fixture.detectChanges();
  expect(component.searchType).toBe(component.searchByRegType);
});

内容的提问来源于stack exchange，提问作者Christèle Legeard