Testing DashJS with Jest & Enzyme

Question

I am trying to write Jest tests for a React component that contains a DashJS media player. I use the Enzyme mount method to try and test the component, but it seems that the DashJS media player was not able to mount correctly.

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 following error appears on the last line ( this.videoManager.preload(); ):

Before calling this method, you must first call attachSource () with a valid source,

When I run the component, it works fine - these are just the tests that I am having problems with. I could not find any related problems / solutions on the Internet.

I use the following versions of each respective 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 would be appreciated!

Answer 1

This error implies that there is some problem with videoUrl , which is why the value passed to initialize should not be set. When preload verifies that the correct source is installed, an error occurs.

Assuming there is videoUrl empty string in your test, but not equal to zero, when the component is used normally?

Answer 2

If you look at it again, the problem is probably that you (presumably) use the JSDOM to provide the DOM for your tests, and the JSDOM does not provide the MediaSource or WebKitMediaSource in the window . This makes it impossible to initialize dash.js. dash.js should throw an opportunity error that can be caught with player.on('error', () => {}) .

As an additional note, you provide the initialize video initialize , and also set auto play to true . Doing the first will cause preload do nothing, because instead, it will just load segments into SourceBuffer, which is probably not the way you wanted.