Angular mock数据测试报错Cannot read property 'subscribe' of undefined

报错根因 #

调用UploadDataReturn()方法时拿到的返回值是undefined，对undefined调用.subscribe()就会触发该报错。
核心逻辑错误出在服务实现中：

• 类属性ReturnData仅声明了Observable类型，从未被赋值，默认值为undefined
• 方法内部定义的const ReturnData是普通JS对象，属于方法内的局部变量，从未被返回
• 已经导入的of操作符没有被使用，没有将模拟数据转为合法的Observable对象

修正方案 #

直接修改服务方法，用of()将模拟数据包装为合法Observable返回即可，不需要声明多余的未赋值类属性。

修正后的 upload.service.ts #

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { InvalidSOEIDModel } from '../Uploadmodel/uploadmodel'

@Injectable({
  providedIn: 'root' // 推荐用该方式注册服务，无需手动在模块providers中声明
})
export class UploadService {
  UploadDataReturn(): Observable<InvalidSOEIDModel[]> {
    // 模拟数据结构匹配声明的模型类型
    const mockData: InvalidSOEIDModel[] = [
      { SOEID: "AAAAA" },
      { SOEID: "BBBBB" }
    ];
    // 返回包装后的Observable
    return of(mockData);
  }
}

组件侧优化建议（原逻辑无致命错误，仅做规范调整） #

import { Component, OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UploadService } from '../UploadService/upload.service';
import { InvalidSOEIDModel } from '../Uploadmodel/uploadmodel';

@Component({
  selector: 'app-file-load-init',
  templateUrl: './file-load-init.component.html',
  styleUrls: ['./file-load-init.component.css']
})
export class FileLoadInitComponent implements OnInit {
  // 初始化空数组避免模板渲染报错，变量名用小驼峰，不要和模型类重名
  invalidSOEIDList: InvalidSOEIDModel[] = [];

  ngOnInit(): void {}

  constructor(
    private http: HttpClient,
    // 服务实例名用小驼峰，符合TS编码规范
    private uploadService: UploadService,
  ) {}

  onUpload(){
    this.getSOEIDVerifyData();
  }

  private getSOEIDVerifyData(){  
    this.uploadService.UploadDataReturn()
     .subscribe((res: InvalidSOEIDModel[]) => {
          console.log(res);
          this.invalidSOEIDList = res;
     })
  }
}

额外注意事项 #

• 原代码中类属性和方法内局部变量重名，非常容易引发逻辑混淆，建议编码时区分命名规则：成员属性可加private/public修饰符，局部变量统一用小驼峰格式。
• 组件文件中不需要导入HttpClientModule和HttpHandler：HttpClientModule仅需在根模块/特性模块的imports数组中声明一次即可，组件层面只需要导入HttpClient就能完成注入使用。
• 遵循Angular编码规范：类名（组件、服务、模型类）用大驼峰命名，服务实例、方法名、普通变量用小驼峰命名，避免变量名和类名重名引发的解析错误。

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