Angular 11单元测试引入MediaRecorder后编译报错TS2304的解决方案咨询

我之前也碰到过一模一样的问题！项目本身能正常编译是因为浏览器环境默认支持MediaRecorder API，但测试环境（Karma/Jasmine）的TypeScript配置里没包含对应的类型定义，所以才会抛出error TS2304: Cannot find name 'MediaRecorder'的编译错误。下面给你几个靠谱的解决方案，按优先级推荐：

方案1：给测试环境的TypeScript配置添加DOM类型库 #

这是最直接的解决方法，因为MediaRecorder属于浏览器DOM API的一部分，只要让测试环境的TypeScript识别DOM类型即可：

1. 打开项目里的tsconfig.spec.json文件（一般在根目录或src目录下）
2. 找到compilerOptions下的types数组，添加"dom"：

{
  "compilerOptions": {
    // 其他配置...
    "types": [
      "jasmine",
      "dom" // 新增这一行
    ]
  },
  // 其他配置...
}

保存后重新运行测试，应该就能解决类型找不到的问题了。

方案2：在测试中Mock MediaRecorder（更符合单元测试原则） #

单元测试的核心是隔离依赖，我们其实不需要真实的MediaRecorder，直接Mock一个假的类来替代全局的MediaRecorder就行，还能方便验证方法调用：

在你的测试文件里添加以下代码：

// 定义Mock类，实现你用到的MediaRecorder方法和属性
class MockMediaRecorder {
  constructor(private stream: MediaStream) {}
  // 用jasmine的spy来模拟方法，方便后续断言
  start = jasmine.createSpy('MediaRecorder.start');
  stop = jasmine.createSpy('MediaRecorder.stop');
  ondataavailable: (event: BlobEvent) => void = () => {};
  // 如果你还用到了其他属性/方法，比如mimeType、state，也可以在这里添加
}

// 在每个测试前替换全局的MediaRecorder
beforeEach(() => {
  (window as any).MediaRecorder = MockMediaRecorder;
});

这样测试时会使用我们的Mock类，既解决了类型问题，又能更好地控制测试逻辑，比如验证start()方法是否被调用过。

方案3：手动添加类型声明（兜底方案） #

如果上面两个方法都不生效，可以手动给MediaRecorder添加类型声明：

1. 在测试目录（比如src/test）下创建一个typings.d.ts文件
2. 添加以下类型声明（可以根据你实际用到的方法扩展）：

declare class MediaRecorder {
  constructor(stream: MediaStream);
  start(timeslice?: number): void;
  stop(): void;
  pause(): void;
  resume(): void;
  ondataavailable: (event: BlobEvent) => void;
  onstop: (event: Event) => void;
  mimeType: string;
  state: 'inactive' | 'recording' | 'paused';
}

TypeScript会自动识别这个声明文件，就不会再报错找不到MediaRecorder了。

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