How to use jQuery with jsdom@5?

Question

I am migrating from node.js to io.js and my old node.js code does not work with jsdom@5.

var jsdom=require('jsdom');
var $=require('jquery')(jsdom.jsdom().createWindow);

Here is the error:

/tmp/iojs/node_modules/jquery/dist/jquery.js:28
                                if ( !w.document ) {
                                       ^
TypeError: Cannot read property 'document' of undefined
    at module.exports (/tmp/iojs/node_modules/jquery/dist/jquery.js:28:12)
    at Object.<anonymous> (/tmp/iojs/test.js:2:24)
    at Module._compile (module.js:431:26)
    at Object.Module._extensions..js (module.js:449:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Function.Module.runMain (module.js:472:10)
    at startup (node.js:124:18)
    at node.js:959:3

I am using latest io.js v2.0.1, jsdom@5.4.1 and jquery@2.1.4.

What is the right way to use jQuery with jsdom@5?

I was using jsdom@3 with node.js but since I am migrating to io.js, I have upgraded to jsdom@4. Don't see anything about jQuery with io.js in your link... — untitled, May 13 '15 at 19:14

score 27 · Accepted Answer · edited Aug 26 '15 at 00:28

27

The following is more in-line with what you are trying to do. Check out the repo

 // using Version 5.4.1
 var jsdom = require('jsdom').jsdom;
 var document = jsdom('<html></html>', {});
 var window = document.defaultView;
 var $ = require('jquery')(window);

The concrete problem with your original code is that it uses the createWindow API, which was removed in jsdom 1.0.0-pre.1. (Note that the document.parentWindow suggested in that change log entry was then itself removed in 4.0.0.)

edited Aug 26 '15 at 00:28

Domenic

110,262
41
219
271

answered May 13 '15 at 19:44

undefined

2,154
15
16

Great! I have edited my question because the difference was in jsdom@5. Thanks! – untitled May 13 '15 at 20:09

score 11 · Answer 2 · answered Jan 02 '18 at 20:00

11

Looking at the documentation https://github.com/tmpvar/jsdom. This should work for jsdom@11.5.1

var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { window } = new JSDOM('<html></html>');
var $ = require('jquery')(window);

answered Jan 02 '18 at 20:00

addousas

189
2
8

Not able to use $ on jsdom fragments this way. Is it supposed to work or will it work only for main document? – Naga Kiran May 16 '18 at 02:37

score 2 · Answer 3 · answered Aug 10 '16 at 10:08

The official documentation suggests the use of the jsdom.env and jsdom.jQueryify apis.

The `jsdom.env` way

// Print all of the news items on Hacker News
var jsdom = require("jsdom");

jsdom.env({
    url : "http://news.ycombinator.com/",
    scripts : ["http://code.jquery.com/jquery.js"],
    done : function (err, window) {
        var $ = window.$;
        console.log("HN Links");
        $("td.title:not(:last) a").each(function() {
            console.log(" -", $(this).text());
        });
    }
});

The `jsdom.jQueryify` way

var jsdom = require("jsdom");
var window = jsdom.jsdom().defaultView;

jsdom.jQueryify(window, "http://code.jquery.com/jquery-2.1.1.js", function () {
    window.$("body").append('<div class="testing">Hello World, It works</div>');
    console.log(window.$(".testing").text());
});

what is the new/current way of doing it? – Philipp Kyeck Sep 28 '17 at 10:07 — Philipp Kyeck, Sep 28 '17 at 10:07

How to use jQuery with jsdom@5?

3 Answers3

The jsdom.env way

The jsdom.jQueryify way

The `jsdom.env` way

The `jsdom.jQueryify` way