// The hacky bit of this approach is that this module uses | |
// jQuery, but it is not referenced here. This is because I | |
// am populating it in the test via global namespace. | |
// | |
// In the browser this still works because I am adding jQuery | |
// via a Browserify transform (browserify-global-shim). | |
function someModule() { | |
} | |
modules.export = someModule; | |
someModule.doStuff = function() { | |
jQuery('body').append('<div class="some-module"></div>'); | |
} |
var should = require('should'), | |
assert = require('assert'), | |
jsdom = require('jsdom'); | |
var someModule = require('./someModule'); | |
describe('someModule', function() { | |
// create some jsdom magic to allow jQuery to work | |
var doc = jsdom.jsdom(html), | |
window = doc.parentWindow, | |
$ = global.jQuery = require('jquery')(window); | |
it('does stuff', function() { | |
someModule.doStuff(); | |
$('div.some-module').length.should.equal(1); | |
}); | |
}); |
Correct. html
could simply be a string, like "<html><body></body></html>"
The above mentioned solution works fine for jsdom~<v10, for jsdom v10~ use the following approach:
const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;
This worked for me for jsdom >v10
const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;
const $ = global.jQuery = require('jquery')(window);
const expect = require('chai').expect
const app = require('./app.js')
describe('Initialization', function() {
it('Signs of life',()=>{
const result = app.init()
expect(result).to.equal('it lives!')
});
});
The only thing that worked for me under v11 is
const fs = require( 'fs' );
const path = require( 'path' );
const testHTML = fs.readFileSync( path.join( __dirname, 'index.html' ) ).toString();
const { JSDOM } = require( 'jsdom' );
const jsdom = new JSDOM( testHTML );
const { window } = jsdom;
const { document } = window;
const $ = global.jQuery = require( 'jquery' )( window );
global.window = window;
global.document = document;
console.log( $ );
const fip = require('/Volumes/Development/vagrant/www/npm/public_html/fontIconPicker/dist/js/jquery.fonticonpicker.js')( $ );
console.log( fip );
$( '#fiptest' ).fontIconPicker();
console.log( $( '.icons-selector' ).length );
I had to define global.window
and global.document
after requiring jquery
. Otherwise it would just send an object which in terms of browser is equivalent to jQuery( window )
;
Also if defining global.window
and global.document
, then there is no need to pass window
while requiring jquery
. Because it relies on global if no root is passed.
const fs = require( 'fs' );
const path = require( 'path' );
const testHTML = fs.readFileSync( path.join( __dirname, 'index.html' ) ).toString();
const { JSDOM } = require( 'jsdom' );
const jsdom = new JSDOM( testHTML );
const { window } = jsdom;
const { document } = window;
global.window = window;
global.document = document;
const $ = global.jQuery = require( 'jquery' );
console.log( $ );
const fip = require('/Volumes/Development/vagrant/www/npm/public_html/fontIconPicker/dist/js/jquery.fonticonpicker.js')( $ );
console.log( fip );
$( '#fiptest' ).fontIconPicker();
console.log( $( '.icons-selector' ).length );
@swashata Thanks for posting-- this helped me out of a jam! 👍
@wlcdesigns That code snippet is gold; concise, functional and helpful - thanks!
I'm having issues with this now...
AssertionError: expected [TypeError: $ is not a function] to be undefined
From this testfile.
const expect = require('chai').expect;
describe("myjquerytest", function () {
it('should not throw an exception parsing the JS file', function () {
try {
const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;
const { document } = window;
global.window = window;
global.document = document;
global.$ = global.jQuery = require('jquery')(window);
var test = $(document);
} catch (err) {
expect(err).to.be.undefined;
}
});
});
The problem, as I can see it, is that jQuery and $ are not defined as functions but as objects, and can't be used as a function with $(document). So I'm guessing I should assign $ to something else... maybe the result of jQuery.fn.init? or something?
jsdom.jsdom(html)
->html is not defined
... seems you forgot something