ReferenceError: MediaStream 没有用 Jest 和 Vue Typescript 定义答案

【问题标题】：ReferenceError: MediaStream is not defined with Jest and Vue TypescriptReferenceError: MediaStream 没有用 Jest 和 Vue Typescript 定义
【发布时间】：2020-08-27 17:58:32
【问题描述】：

我在 Vue 中有一个组件（写在 typescript 上），它的属性可以是 String、Blob 或 MediaStream，如下所示

@Prop({ type: [String, Blob, MediaStream] }) readonly srcObject?: string | {};

当我运行调用此组件的单元测试时，它会引发错误并显示以下消息：


    ReferenceError: MediaStream is not defined

      66 | })
      67 | export default class Player extends Vue {
    > 68 |   @Prop({ type: [String, Blob, MediaStream] }) readonly srcObject?: string | {};
         | ^
      69 |   @Prop({ type: String }) readonly mediaType?: string;
      70 |   @Prop({ type: Boolean }) readonly srcIsBeingRecorded?: boolean;
      71 |   @Prop({ type: Boolean }) readonly autoplay?: boolean;

我尝试了不同的方法，例如将 MediaStream 对象添加到全局 window 模拟，但不幸的是，它没有成功。之后，我尝试将MediaStream 替换为window.MediaStream 以避免... is not defined ... 消息。我在网上找到但没有成功。我不明白为什么 jest 没有找到 MediaStream 类型或者它为什么会崩溃。如果有人可以帮助我解决此错误或向我展示正确的方法，我将非常优雅。

以下依赖版本信息：

λ dazh [work] at  feature/global-handling !?
→ npx tsc --version                                                                                                                                                                             [a81cdad]
Version 3.5.3

λ dazh [work] at  feature/global-handling !?
→ npx vue --version                                                                                                                                                                             [a81cdad]
@vue/cli 4.3.1

λ dazh [work] at  feature/global-handling !?
→ npx jest --version                                                                                                                                                                            [a81cdad]
24.9.0

λ dazh [work] at  feature/global-handling !?
→ cat package.json | grep '"vue":'                                                                                                                                                              [a81cdad]
    "vue": "^2.6.11",

【问题讨论】：

标签： typescript unit-testing vuejs2 jestjs vue-test-utils

【解决方案1】：

我在 MediaStream 接口方面遇到了类似的问题。我的解决方案是将mockImplementation 用于MediaStream。这是我的套件配置的 sn-p：

 beforeAll(() => {
    window.MediaStream = jest.fn().mockImplementation(() => ({
      addTrack: jest.fn()
      // Add any method you want to mock
    }))
  })

我希望这会有所帮助?

【讨论】：

您好，感谢您的回答，目前我不再从事该项目，无法测试您的回答，但我会尝试重现该问题以确认您的方法。