用Jest和Enzyme测试DashJS

Question

I'm trying to write Jest tests for a React component which contains a DashJS media player. I'm using Enzyme's mount method to try and test the component, but it seems that the DashJS media player fails to mount properly.

In my componentDidMount method, I have the following code:

    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();

The last line ( this.videoManager.preload(); ) produces the following error:

You must first call attachSource() with a valid source before calling this method thrown

When I run the component it works normally - it's only the testing I'm having issues with. I haven't been able to find any related issues/solutions online.

I'm using the following versions of each relevant package:

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

Any help will be appreciated!

Answer 1

That error implies that there was some issue with videoUrl , which caused the value passed in initialize not to be set. When preload checks that a valid source has been set, the error is thrown.

At a guess, is videoUrl an empty string in your test but non-zero length when the component is used normally?

Answer 2

Looking at this again, the problem is probably that you are (presumably) using JSDOM to provide the DOM for your tests, and JSDOM does not provide MediaSource or WebKitMediaSource in window . This causes dash.js to fail to initialise. dash.js should throw a capability error which can be caught using player.on('error', () => {}) .

As a side note, you are providing a video object to initialize , as well as setting autoplay to true . Doing the first will cause preload do nothing since it will just load segments in to the SourceBuffer instead, which probably isn't what you wanted.