为何Angular测试中Observable的instanceof判断返回false？

这个问题的核心原因是测试环境中，你mock的Observable和Angular CDK内部用来判断的Observable不是同一个构造函数的实例，导致CDK的instanceof Observable检查失败，抛出了数据源类型不匹配的错误。

为什么会出现这种情况？通常有这几个原因：

• 测试环境中存在多个版本的RxJS依赖，导致生产代码用的Observable和测试mock用的Observable来自不同的包副本。
• 测试文件中RxJS的导入路径有误，比如不小心从rxjs/internal/observable/of这类内部路径导入了of，而不是标准的rxjs路径。
• 某些测试工具的配置问题，导致RxJS的模块被重复加载，产生了不同的Observable构造函数实例。

解决步骤 #

1. 统一RxJS的导入路径 #

确保测试文件中创建Observable的代码和生产代码的导入完全一致，都使用标准的RxJS导入：

import { of } from 'rxjs'; // 正确的导入路径

避免使用任何内部路径的导入，比如rxjs/internal/...，这类路径的模块可能会创建独立的Observable实例。

2. 清理重复的RxJS依赖 #

检查你的package-lock.json（npm）或yarn.lock（yarn）文件，搜索rxjs，看看是否存在多个版本的依赖。如果有的话：

• 删除node_modules文件夹和锁文件
• 重新执行npm install或yarn install，确保只安装一个版本的RxJS。

3. 更换Mock的Observable创建方式 #

如果上面的方法没用，可以尝试用BehaviorSubject来创建Observable，这种方式创建的Observable通常能被CDK正确识别：

import { BehaviorSubject } from 'rxjs';

// 替换原来的mock代码
const mockListeners = [new Listener(), new Listener()];
const apiService = {
  getListeners: () => new BehaviorSubject(mockListeners).asObservable()
} as ApiService;

BehaviorSubject的asObservable()方法返回的Observable会继承自标准的RxJS Observable类，能通过CDK的instanceof检查。

4. 验证测试模块配置 #

确保你的测试模块中没有重复导入RxJS相关的模块，并且正确导入了Angular Material的表格模块：

import { MatTableModule } from '@angular/material/table';

TestBed.configureTestingModule({
  imports: [MatTableModule],
  providers: [{ provide: ApiService, useValue: apiService }],
  declarations: [ListenersTableComponent]
});

额外调试技巧 #

你可以在测试代码中添加一行日志，验证Observable的构造函数来源：

const obs = apiService.getListeners();
console.log(obs.constructor === Observable); // 如果输出false，说明是构造函数不匹配的问题

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