Angular Jest测试mock Observable值报'get'不可用解决方法

报错根因 #

jest.spyOn(obj, prop, 'get')的写法仅对通过getter访问器定义的属性生效，你的组件中cust$是直接赋值的普通实例属性，不存在原生getter，所以调用时会直接抛出'get'不可用的错误。
另外原始测试代码还存在几个基础问题：外层describe命名与实际测试组件不匹配、custCtrl/name变量未定义，执行前需要先修正。

可选实现方案 #

方案1：直接替换实例属性（最简单，优先选用） #

普通实例属性不需要用spyOn做监听，直接在组件实例创建后、首次变更检测触发前，把属性替换为mock的Observable即可，这是Angular测试中mock数据流属性的通用写法。
修正后的测试代码：

import { of } from 'rxjs';
import { ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [CustomerComponent],
      imports: [ReactiveFormsModule] // 依赖响应式表单必须导入该模块
    }).compileComponents();

    fixture = TestBed.createComponent(CustomerComponent);
    component = fixture.componentInstance;
  });

  describe('cust$返回false时的渲染逻辑', () => {
    beforeEach(() => {
      // 直接替换cust$为mock数据流
      component.cust$ = of(false);
      // 替换完成后再触发变更检测，让模板的AsyncPipe订阅mock流
      fixture.detectChanges();
    });

    it('正常渲染cust-type元素', () => {
      const element = fixture.debugElement.query(By.css('cust-type'));
      expect(element).toBeTruthy();
    });
  });
});

方案2：从数据源触发真实流（测试可信度更高） #

cust$本身是表单控件custCtrlField的valueChanges事件流派生出来的，不需要mock属性本身，直接给表单控件设置对应值，让真实数据流吐出目标布尔值即可，这种方式完全模拟用户真实操作路径，不会割裂组件内部逻辑。
对应测试代码：

import { ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [CustomerComponent],
      imports: [ReactiveFormsModule]
    }).compileComponents();

    fixture = TestBed.createComponent(CustomerComponent);
    component = fixture.componentInstance;
    // 首次变更检测触发组件初始化，完成cust$流的创建
    fixture.detectChanges();
  });

  it('表单值不为Name时cust$返回false，正常渲染cust-type元素', () => {
    // 设置非'Name'的表单值，让流自动返回false
    component.custCtrlField.setValue('test-value');
    // 触发变更检测，让AsyncPipe接收最新值更新视图
    fixture.detectChanges();

    const element = fixture.debugElement.query(By.css('cust-type'));
    expect(element).toBeTruthy();
  });
});

注意事项 #

• 所有针对模板AsyncPipe订阅的Observable做的mock，必须在首次fixture.detectChanges()之前完成替换，否则模板会优先订阅原始数据流，mock值不会生效。
• 如果一定要用jest.spyOn实现属性监听，需要手动将目标属性改写为getter访问器，但这种写法没有实际收益，不推荐使用。
• 测试响应式表单相关组件时，必须在TestBed配置中导入ReactiveFormsModule，否则表单控件相关逻辑会直接报错。

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