5

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!

JP Strydom
  • 248
  • 3
  • 10

2 Answers2

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?

Anonymous Coward
  • 1,096
  • 11
  • 22
  • 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. – JP Strydom Apr 04 '18 at 12:31
1

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.

Anonymous Coward
  • 1,096
  • 11
  • 22
  • I am indeed using JSDOM, thanks for the insight. Any idea how I can work around this. Autoplay is actually passed in as a configurable prop - I just omitted it for the example. Would you suggest not using `preload` when autoplay is set to true? – JP Strydom Apr 04 '18 at 15:33
  • The `preload` method is intended to allow the player to buffer media without a media element attached. When you have a media element attached already dash.js, in its default configuration will automatically preload media. In terms of working around the lack of MSE support, that depends on what you want the test to achieve. dash.js can't do much at all without MSE support, and it also can't currently do much in a headless environment. – Anonymous Coward Apr 04 '18 at 15:52
  • I basically just want to tests that the correct DashJS functions are called on certain button clicks, and that the correct DasJS events are registered. – JP Strydom Apr 09 '18 at 06:44