Dash.js: Testing DashJS with Enzyme and Jest in React

[JPStrydom]

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!

_Note: I created the same issue on StackOverflow here._

[nicosang]

Hi @JPStrydom ,

as asked on StackOverflow, could you, please, give us the value of videoUrl?

Thanks,
Nico

[JPStrydom]

Hi @nicosang

In both the tests and live versions of the app I've been using the dashJS test url (videoUrl="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd"). The live version works, but the tests fails with the above mentioned error. When debugging the tests, I can see that the url is indeed defined and that the videoPlayer is correctly referenced.

Thanks,
JP

[nicosang]

@JPStrydom , another question for you ;-) : do you call many times in your tests the function initialize?

Nico

[JPStrydom]

No only once. Upon debugging, it fails the first time it tries to call the initialize method. Apparently it has to do with the fact that I'm using JSDOM to render my tests. But I still haven's seen a workaround as of yet,

[nicosang]

it could be the function supportsMediaSource in Capabilities file that could be the origin of the issue. This function is called in initialize function. If JSDOM window object does not support mediasource, it returns false, and your test will failed.

You can use, like it is done in unit test of streaming.MediaPlayerSpec, a CapabilitiesMock which has to mock all the functions of Capabilities file. Then, before calling initialize function in your test, call MediaPlayer.setConfig with your CapabilitiesMock...

Nico

[JPStrydom]

Thanks Nico! I'll look into it 👍

Mind sending me a link to the files you're mentioning?

[nicosang]

https://github.com/Dash-Industry-Forum/dash.js/blob/development/test/unit/streaming.MediaPlayerSpec.js
https://github.com/Dash-Industry-Forum/dash.js/blob/development/test/unit/mocks/CapabilitiesMock.js

[epiclabsDASH]

Closing issue. @JPStrydom, please, feel free to reopen it in case you find any further issue related with this. Thanks