-
-
Save robballou/9ee108758dc5e0e2d028 to your computer and use it in GitHub Desktop.
| // 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