6

I have jQuery plugin that I'm testing. I found this question: How to run Jasmine tests on Node.js from command line? but when I run:

node_modules/jasmine-node/bin/jasmine-node --verbose --junitreport --noColor spec

I got errors that $ is not defined. How can I include jQuery? (Right now I only test utilities that don't interact with the dom).

Community
  • 1
  • 1
jcubic
  • 61,973
  • 54
  • 229
  • 402
  • Did you find a solution for this issue? Not sure if this is a recommended solution, but you can add a version of jquery to same spec folder, the file needs to end with `helper.js`. For example jquery-helper.js - This file will be loaded before the test runs. – filype Nov 17 '14 at 04:16

4 Answers4

3

You will first need to create a DOM that jQuery can do its thing on. You should set this up as a global variable, as you are probably accessing jQuery (or $) on the window element.

First, add jquery and jsdom to your package.json file, eg:

  "dependencies": {
    "jquery": "*"
  },
  "devDependencies": {
    "jsdom": "*"
  }

Run npm install to install the new dependencies you just added.

Then, at the top of your spec file, do something like this:

var jsdom = require("jsdom").jsdom;
global.window = jsdom().parentWindow;
global.jQuery = global.$ = require("jquery")(window);

This creates a window element using jsdom, and lets jquery know what to act on. You should now be able to access both jQuery and $ in your specs.

Farid
  • 715
  • 7
  • 12
  • This don't work I don't get jQuery function but jQuery and $ are object and there are no $.fn. – jcubic Dec 31 '15 at 21:12
1

I've had some difficulty getting this to work too. What I've found works (by going to the jsdom github page: https://github.com/tmpvar/jsdom) is to do the following.

Install the following two packages (as suggested by Farid):

npm install jquery --save
npm install jsdom --save-dev

Then at the top of your spec (test) file type the following:

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM(`<!DOCTYPE html>`);

global.jQuery = global.$ = require("jquery")(window); 
global.window = window;
global.document = window.window;

Now you have set $, window and document globally. This is my first time using javascript, so if I have done something wrong, please let me know!

P.S. There is a neat way to run your tests using npm (I learnt it from here: https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/). Inside your package.json file add a "scripts" section, e.g.

{
  "dependencies": {
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "jasmine-node": "^1.14.5",
    "jsdom": "^10.1.0"
  },
  "scripts": {
    "test": "jasmine-node --verbose --color spec/*"
  }
}

Now you can run your tests by simply typing:

npm run test

or just npm test for short.

gloriphobia
  • 1,423
  • 13
  • 21
0

By try and error I came up with this code that work with jQuery and jsdom inside jasmine-node spec file:

if (typeof window === 'undefined') {
    var jsdom = require("jsdom");
    global.document = jsdom.jsdom();
    global.window = global.document.parentWindow;
    var navigator = {userAgent: "node-js", platform: "Linux i686"};
    global.window.navigator = global.navigator = navigator;
    navigator.platform = "Linux i686";
    global.jQuery = global.$ = require("jquery");
}
jcubic
  • 61,973
  • 54
  • 229
  • 402
0

Using jsdom v7.2.2 and node v4.2.4. I got it to work with the following code:

var jsdom = require("jsdom").jsdom;
global.window = jsdom().defaultView;
global.jQuery = global.$ = require("jquery");
var myModuleThatReliesOnJquery = require("./myModuleThatReliesOnJquery.js");
Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78
Steve R
  • 90
  • 5