用 Jest 和 Enzyme 测试 Dash JS答案

【问题标题】：Testing DashJS with Jest & Enzyme用 Jest 和 Enzyme 测试 Dash JS
【发布时间】：2018-09-08 11:34:40
【问题描述】：

我正在尝试为包含DashJS 媒体播放器的 React 组件编写 Jest 测试。我正在使用 Enzyme 的 mount 方法尝试测试组件，但似乎 DashJS 媒体播放器无法正确安装。

在我的componentDidMount 方法中，我有以下代码：

    this.videoManager = dashjs.MediaPlayer().create();
    this.videoManager.initialize(this.videoPlayer, videoUrl, true);
    // Where this.videoPlayer is a reference to an HTML <video> element
    this.videoManager.preload();

最后一行 (this.videoManager.preload();) 产生以下错误：

在调用这个抛出的方法之前，你必须先调用 attachSource() 并使用一个有效的源

当我运行该组件时，它可以正常工作 - 这只是我遇到问题的测试。我一直无法在网上找到任何相关的问题/解决方案。

我正在使用每个相关软件包的以下版本：

react: "16.2.0"
dashjs: "2.6.7"
jest: "22.3.0"
enzyme: "3.3.0"
enzyme-adapter-react-16: "1.1.1"

任何帮助将不胜感激！

【问题讨论】：

标签： reactjs testing enzyme jestjs dash.js

【解决方案1】：

该错误表明videoUrl 存在一些问题，导致未设置在initialize 中传递的值。当preload 检查是否设置了有效源时，将引发错误。

猜测一下，videoUrl 在你的测试中是一个空字符串，但在组件正常使用时长度非零？

【讨论】：

在应用程序的测试和实时版本中，我一直在使用 dashJS 测试 url (videoUrl="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd")。实时版本有效，但测试因上述错误而失败。在调试测试时，我可以看到确实定义了 url，并且正确引用了 videoPlayer。

【解决方案2】：

再看这个，问题可能是你（大概）使用JSDOM来为你的测试提供DOM，而JSDOM在window中没有提供MediaSource或WebKitMediaSource。这会导致 dash.js 无法初始化。 dash.js 应该抛出一个可以使用 player.on('error', () => {}) 捕获的功能错误。

附带说明一下，您将视频对象提供给initialize，并将自动播放设置为true。执行第一个操作将导致 preload 什么也不做，因为它只会将段加载到 SourceBuffer 中，这可能不是您想要的。

【讨论】：

我确实在使用 JSDOM，感谢您的洞察力。知道如何解决这个问题。自动播放实际上是作为可配置属性传入的——我只是在示例中省略了它。当自动播放设置为 true 时，您是否建议不要使用 preload？
preload 方法旨在允许播放器在没有附加媒体元素的情况下缓冲媒体。当您已经附加了 dash.js 的媒体元素时，在其默认配置中将自动预加载媒体。关于解决缺乏 MSE 支持的问题，这取决于您希望测试实现的目标。如果没有 MSE 支持，dash.js 根本无法做很多事情，而且它目前在无头环境中也无法做很多事情。
我基本上只是想测试在某些按钮点击时调用了正确的 DashJS 函数，并且注册了正确的 DasJS 事件。