No provider for Jasmine-jquery?

Question

I'm using Yeoman+Angular Generator for my application and I have been running around hard to get along with Jasmine! This is where I am stuck. I want to be able to use jQuery selectors with Jasmine tests. I have installed the karma-jasmine and karma-jasmine-jquery packages. Then I installed it for bower (I'm new and I have no idea what should be installed for what!). I have manually added the path in my karma.conf.js, but I still get the message that says this:

Running "karma:unit" (karma) task
Warning: No provider for "framework:jasmine-jquery"! (Resolving: framework:jasmine-jquery) Use --force to continue.

This is how my karma config looks like:

// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2014-09-12 using
// generator-karma 0.8.3

module.exports = function(config) {
    'use strict';

    config.set({
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // base path, that will be used to resolve files and exclude
    basePath: '../',

    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks: ['jasmine-jquery', 'jasmine'],

    // list of files / patterns to load in the browser
    files: [
      'bower_components/jasmine-jquery/lib/jasmine-jquery.js', 
      'bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-route/angular-route.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-touch/angular-touch.js',
      'bower_components/angular-bootstrap/ui-bootstrap.js', 
      'app/scripts/**/*.js',
      //'test/mock/**/*.js',
      'test/spec/**/*.js',
      'app/views/*.html'
    ],

    // list of files / patterns to exclude
    exclude: [],

    // web server port
    port: 8080,

    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: [
      'PhantomJS'
    ],

    // Which plugins to enable
    plugins: [
      'karma-phantomjs-launcher',
      'karma-jasmine',
      'karma-ng-html2js-preprocessor'
    ],

    preprocessors: {
        'app/views/*.html': 'ng-html2js'
    },

    ngHtml2JsPreprocessor: {
        stripPrefix: 'app/',
        moduleName: 'views'
    },

    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false,

    colors: true,

    // level of logging
    // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
    logLevel: config.LOG_INFO,

    // Uncomment the following lines if you are using grunt's server to run the tests
    // proxies: {
        //   '/': 'http://localhost:9000/'
    // },
    // URL root prevent conflicts with the site root
    // urlRoot: '_karma_'
  });
};

Lighten

Answer 1

I had the same problem as this. Fixed it by adding karma-jasmine-jquery to the plugins array in karma.conf.js. This is my karma.conf in full.

 module.exports = function(config) {
  'use strict';

  config.set({
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // base path, that will be used to resolve files and exclude
    basePath: '../',

    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks: ['jasmine-jquery', 'jasmine'],

    // list of files / patterns to load in the browser
    files: [
      'bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'app/scripts/**/*.js',
      'test/mock/**/*.js',
      'test/spec/**/*.js'
    ],

    // list of files / patterns to exclude
    exclude: [],

    // web server port
    port: 8080,

    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: [
      'PhantomJS'
    ],

    // Which plugins to enable
    plugins: [
      'karma-phantomjs-launcher',
      'karma-jasmine-jquery',
      'karma-jasmine',

    ],

    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false,

    colors: true,

    // level of logging
    // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
    logLevel: config.LOG_INFO,

    // Uncomment the following lines if you are using grunt's server to run the tests
    // proxies: {
    //   '/': 'http://localhost:9000/'
    // },
    // URL root prevent conflicts with the site root
    // urlRoot: '_karma_'
  });
};

The other change I made is that as per the jasmine-jquery docs it requires jasmine version of at least 0.2.0. The generator gives version of 0.1.5 (at least it did for me yesterday). So to fix this I ran 'npm install [email protected] --save-dev'. The save dev should do this but make sure you have the correct packages listed in the devDependencies in the root package.json for me I have:

"karma-jasmine": "^0.2.0",
"karma-jasmine-jquery": "^0.1.1",

Obviously these should correspond with the actual packages in node-modules

Hope it helps

C

Kushner

Nice! Please let me try this and get back. – Lighten

Hey I already had this added in conf, and now I have a new error: TypeError: jasmine is undefined jasmine.spiedEventsKey = function (selector, eventName) { – Lighten

Hi, Did you see my updated answer? I'm interested to know if you got it to work – Kushner

Hi... I already have everything in place, except for the versions. How do I check the versions? – Lighten

In the root of the project there's a folder called node-modules. In this open package.json from the karma-jasmine folder. The version should be at the top of the file – Kushner

Hey that too is there! Here: "grunt-karma": "~0.9.0", "ng-html2js": "~1.2.0", "karma-ng-html2js-preprocessor": "*", "karma-jasmine": "~0.2.0", "karma-jasmine-jquery": "~0.1.0", "karma-phantomjs-launcher": "~0.1.4", "angular-ui-router": "~0.2.10", – Lighten

this is the package.json for karma-jasmine-jquery right? You need to look at the one for karma-jasmine and check which version it is – Kushner