I'm experimenting with Jest to unit test an angular application. In order to test the angular bindings I'm trying to use jsdom (N.B. I'm using v3.1.2 as I'm using node not IO). When I need to load a script with the html the test seems to plete before the script is loaded.

I've simplified my test case to use an example from jsdom:

it('updates the view without error', function(){
    var jsdom = require('../../../../node_modules/jsdom/lib/jsdom');

    jsdom.env(
      '<p><a class="the-link" href="">jsdom!</a></p>',
      [".js"],
      function (errors, window) {
        //console.log("contents of a.the-link:", window.$("a.the-link").text());
        console.log("Completed");
        expect(errors).toBeNull();
      }
    );

    console.log('exiting...');
});

If I run this test, the test will pass but the "Completed" log message will not be printed, I can also replace the expect with something that should obviously fail, like expect(false).toBeTruthy() and the test will still "pass". If I remove the injection of jquery then all works as expected.

How should I make sure that the script is loaded before I exit the test? And more generally, using jsdom explicitly with Jest feels a bit wrong. Is there a better way?

I'm experimenting with Jest to unit test an angular application. In order to test the angular bindings I'm trying to use jsdom (N.B. I'm using v3.1.2 as I'm using node not IO). When I need to load a script with the html the test seems to plete before the script is loaded.

I've simplified my test case to use an example from jsdom:

it('updates the view without error', function(){
    var jsdom = require('../../../../node_modules/jsdom/lib/jsdom');

    jsdom.env(
      '<p><a class="the-link" href="https://github./tmpvar/jsdom">jsdom!</a></p>',
      ["http://code.jquery./jquery.js"],
      function (errors, window) {
        //console.log("contents of a.the-link:", window.$("a.the-link").text());
        console.log("Completed");
        expect(errors).toBeNull();
      }
    );

    console.log('exiting...');
});

If I run this test, the test will pass but the "Completed" log message will not be printed, I can also replace the expect with something that should obviously fail, like expect(false).toBeTruthy() and the test will still "pass". If I remove the injection of jquery then all works as expected.

How should I make sure that the script is loaded before I exit the test? And more generally, using jsdom explicitly with Jest feels a bit wrong. Is there a better way?

• javascript
• angularjs
• jsdom
• jestjs

2 Answers 2

Because .env is probably asynchronous, the test will always exist before the callback is called.

According to the jest tutorial, you can simply assign the HTML to document.body.innerHTML:

// Set up our document body
document.body.innerHTML =
    '<div>' +
    ' <span id="username" />' +
    ' <button id="button" />' +
    '</div>';
var $ = require('jquery');

Alternatively you could use pit instead of it and return a promise from the function.

I think the best way to test asynchronous code is to pass the 'done' callback as explained in the docs. Your code would then bee:

it('updates the view without error', function(done){
    var jsdom = require('../../../../node_modules/jsdom/lib/jsdom');

    jsdom.env(
      '<p><a class="the-link" href="https://github./tmpvar/jsdom">jsdom!</a></p>',
      ["http://code.jquery./jquery.js"],
      function (errors, window) {
        //console.log("contents of a.the-link:", window.$("a.the-link").text());
        console.log("Completed");
        expect(errors).toBeNull();
        done();
      }
    );

    console.log('exiting...');
});