Karma settings, chai, requirejs, chai-jquery

Question

I'm close to getting our tests to run with karma, but I skip the last step (I think), getting chai-jquery to behave, I tried two different plugins https://www.npmjs.com/package/karma- chai-jquery and https://www.npmjs.com/package/karma-jquery-chai without success, even after performing the specified order, various github problems or readme files.

This is my tests-main.js file

 var allTestFiles = []; var TEST_REGEXP = /(spec|test)\.js$/i; Object.keys(window.__karma__.files).forEach(function(file) { if (TEST_REGEXP.test(file)) { // Normalize paths to RequireJS module names. allTestFiles.push(file); } }); require.config({ baseUrl: '/base', paths: { 'chai': 'node_modules/chai/chai', 'chai-jquery': 'node_modules/chai-jquery/chai-jquery', 'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery', 'underscore': '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min', 'sn/sn-underscore': 'static/scripts/sn/sn-underscore', 'vendor/jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min' }, deps: allTestFiles, callback: window.__karma__.start }); 

This is my karma.conf.js (all optional or standard parameters removed)

 // Karma configuration module.exports = function(config) { config.set({ basePath: '', // Can't use chai in here for whatever reason frameworks: ['mocha', 'requirejs'], files: [ 'static/scripts-test/test-main.js', {pattern: 'node_modules/chai/chai.js', included: true}, {pattern: 'static/scripts-test/**/*.js', included: false}, {pattern: 'static/scripts/sn/**/*.js', included: false} ], exclude: [ 'static/scripts/global.js' ], browsers: ['PhantomJS'] }); }; 

This is a “working” spec file, it correctly uses links to chai and jquery , but loading chai-jquery fails every time.

 define([ 'chai', 'jquery', 'static/scripts/sn/widgets/dismissable' ], function(chai, $) { chai.should(); chai.expect(); describe('Dismissable', function() { var $el = $('</p>'), closeBtnSel = '.js-dismissable-close-btn'; beforeEach(function() { $('body').append('<div id="fixtures"></div>'); $el.appendTo('#fixtures').dismissable({closeFn: 'hide'}); }); afterEach(function() { $el.remove(); }); it('should correctly create the HTML', function() { $(closeBtnSel).should.exist; $el.should.have.class('dismissable'); }); }); }); 

The error I am getting is:

 TypeError: 'undefined' is not an object (evaluating '$(closeBtnSel).should.exist') 

This is my directory structure:

 - static/ - scripts/ - scripts-test/ - test-main.js - node_modules/ - karma.conf.js 

And finally, my package.json

 { "devDependencies": { "chai": "^2.3.0", "chai-jquery": "^2.0.0", "jquery": "^2.1.4", "karma-chai": "^0.1.0", "karma-mocha": "^0.1.10", "karma-requirejs": "*", "mocha": "^2.2.5", "requirejs": "^2.1.18", "should": "^6.0.1" } } 

Some of the errors that I usually get are:

When changing the order of frameworks in karma.conf

  throw error('No provider for "' + name + '"!'); ^ Error: No provider for "framework:chai"! (Resolving: framework:chai) 

even after installing the plugin

Sometimes I get something like this:

 Error: Mismatched anonymous define() module: function ($) { return function (chai, utils) { return chaiJquery(chai, utils, $); }; } 

Any help would be greatly appreciated here; I cannot wrap this topic around myself.

EDIT: slight change based on Louis recommendation

Answer 1

To set the "should" API, you must do chai.should() , that is, call the function. The string var should = chai.should nothing useful.

It was not clear to me if your problem with should caused a cascade of problems or if something else was happening. I took a second look and found that there really are more problems.

RequireJS Download from CDN + Karma

There seems to be a mistake in Karma. See this question , which is still open. There is also this question , which is closed, but appears informative. So I replaced the CDN with a local copy. Otherwise, I get:

 ERROR: There is no timestamp for //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js! 

Tea

One of the problems is that you need to decide whether you want to load chai using a script element or via RequireJS. The code in your question is trying to do both, which may cause problems. I decided to download it using RequireJS. This means that it should have included: false .

chai-jquery

Your test file does not load chai-jquery and does not ask chai use it. Therefore, it does not exist in relation to your code. Intermittent download problems detected may be caused by code in other test files. The call to require.config has deps: allTestFiles , but this does not indicate the order. RequireJS can upload files to allTestFiles in any order for free.

Example

I took the code that you posted in your question as a basis for an example. Obviously, I do not have all the code that you have on your side.

Here is the new karma.conf.js :

 module.exports = function(config) { config.set({ basePath: '', frameworks: ['mocha', 'requirejs'], files: [ 'static/scripts-test/test-main.js', {pattern: 'node_modules/chai/chai.js', included: false}, {pattern: 'node_modules/jquery/dist/jquery.min.js', included: false}, {pattern: 'node_modules/chai-jquery/chai-jquery.js', included: false}, {pattern: 'static/scripts-test/**/*.js', included: false}, {pattern: 'static/scripts/sn/**/*.js', included: false} ], exclude: [ 'static/scripts/global.js' ], browsers: ['PhantomJS'] }); }; 

New static/scripts-test/test-main.js that locally loads jQuery:

 var allTestFiles = []; var TEST_REGEXP = /(spec|test)\.js$/i; Object.keys(window.__karma__.files).forEach(function(file) { if (TEST_REGEXP.test(file)) { // Normalize paths to RequireJS module names. allTestFiles.push(file); } }); require.config({ baseUrl: '/base', paths: { 'chai': 'node_modules/chai/chai', 'chai-jquery': 'node_modules/chai-jquery/chai-jquery', 'jquery': 'node_modules/jquery/dist/jquery.min', 'underscore': '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min', 'sn/sn-underscore': 'static/scripts/sn/sn-underscore', 'vendor/jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min' }, deps: allTestFiles, callback: window.__karma__.start }); 

The correct test file is called static/scripts-test/foo.spec.js , note the use of chai.use(chai_jquery) :

 define([ 'chai', 'jquery', 'chai-jquery', ], function(chai, $, chai_jquery) { chai.should(); chai.use(chai_jquery); describe('example', function() { it('body should exist', function() { $(document.body).should.exist; }); it('#blah should not exist', function() { $("#blah").should.not.exist; }); }); }); 

The above code works without problems:

 WARN [watcher]: Pattern "/tmp/t5/static/scripts/sn/**/*.js" does not match any file. INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/ INFO [launcher]: Starting browser Chrome INFO [Chrome 43.0.2357 (Linux 0.0.0)]: Connected on socket Za9vBp9shDedsIhcNn63 with id 48683492 Chrome 43.0.2357 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.005 secs / 0.002 secs) 

I use Chrome as a browser, but this is the only difference.