时间戳

首页 > 解决方案 > ReferenceError：没有使用 Jest 和 Vue Typescript 定义 MediaStream

typescript - ReferenceError：没有使用 Jest 和 Vue Typescript 定义 MediaStream

问题描述

我在 Vue 中有一个组件（写在打字稿上），它有一个类型可以是 a或的属性String，如下所示BlobMediaStream

@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模拟中，但不幸的是，它没有成功。之后，我尝试替换MediaStreamforwindow.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",

标签： typescriptunit-testingvuejs2jestjsvue-test-utils

解决方案

关于 MediaStream 接口，我遇到了类似的问题。我的解决方案是使用mockImplementationfor MediaStream。这是我的套件配置的片段：

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

我希望这会有所帮助

推荐阅读