Search code examples
angularjsgruntjsjasminebowerkarma-jasmine

jasmine matcher functions not loading in angularjs/karma unit tests


I'm writing unit tests for an angularJs app, I'm using the karma test runner with the jasmine framework.

I'm testing a function that should pull objects from firebase, I've installed the jasmine-expect with karma-jasmine-matchers plugin.

My function is as follows:

describe('Controller: QuizCtrl', function () {

  // load the controller's module
  beforeEach(module('geafApp'));

  var QuizCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    QuizCtrl = $controller('QuizCtrl', {
      $scope: scope
    });
  }));

  it('should contain answers object from firebase', function () {
    expect(scope.questions).toBeNonEmptyObject();
  });
  });

I then run:

grunt karma

to run the tests, but it fails with the following error:

    TypeError: 'undefined' is not a function (evaluating 'expect(scope.questions).toBeNonEmptyObject()')

My package.json is as follows:

{
  "name": "geaf",
  "version": "0.0.1",
  "description": "German Embassy Quiz",
  "dependencies": {},
  "repository": {},
  "devDependencies": {
    "bower": "^1.3.1",
    "chalk": "^0.4.0",
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^2.0.0",
    "grunt-concurrent": "^1.0.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-compass": "^1.0.0",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-connect": "^0.9.0",
    "grunt-contrib-copy": "^0.7.0",
    "grunt-contrib-cssmin": "^0.12.0",
    "grunt-contrib-htmlmin": "^0.4.0",
    "grunt-contrib-imagemin": "^0.9.2",
    "grunt-contrib-jshint": "^0.11.0",
    "grunt-contrib-uglify": "^0.7.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-filerev": "^2.1.2",
    "grunt-google-cdn": "^0.4.3",
    "grunt-karma": "^0.12.0",
    "grunt-newer": "^1.1.0",
    "grunt-ng-annotate": "^0.9.2",
    "grunt-svgmin": "^2.0.0",
    "grunt-usemin": "^3.0.0",
    "grunt-wiredep": "^2.0.0",
    "gulp": "^3.9.0",
    "gulp-bower": "0.0.10",
    "gulp-sass": "^2.0.4",
    "http-server": "^0.6.1",
    "jasmine-core": "^2.3.4",
    "jasmine-expect": "^1.22.3",
    "jshint-stylish": "^1.0.0",
    "karma": "^0.13.3",
    "karma-chrome-launcher": "^0.2.0",
    "karma-firefox-launcher": "^0.1.6",
    "karma-jasmine": "^0.3.6",
    "karma-jasmine-matchers": "^2.0.0-beta1",
    "karma-junit-reporter": "^0.3.3",
    "karma-ng-html2js-preprocessor": "^0.1.2",
    "karma-ng-scenario": "^0.1.0",
    "karma-phantomjs-launcher": "^0.2.0",
    "load-grunt-tasks": "^3.1.0",
    "protractor": "~0.20.1",
    "shelljs": "^0.2.6",
    "time-grunt": "^1.0.0"
  },
  "scripts": {
    "postinstall": "bower install",
    "prestart": "npm install",
    "start": "http-server -a localhost -p 8000",
    "pretest": "npm install",
    "test": "karma start karma.conf.js",
    "test-single-run": "karma start karma.conf.js  --single-run",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update",
    "preprotractor": "npm run update-webdriver",
    "protractor": "protractor e2e-tests/protractor-conf.js",
    "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('app/bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\""
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

My karma.conf.js loads the plugins as follows:

plugins: [ 'karma-chrome-launcher', 'karma-firefox-launcher', 'karma-jasmine', 'karma-phantomjs-launcher', 'karma-junit-reporter', 'karma-jasmine-matchers' ],

I've ran both npm install and bower install so the functions should load up correctly but seem not to.

Any help is greatly appreciated as it's my first time writing angular apps and unit tests for them.


Solution

  • You also have to add jasmine-matchers as a framework to karma.conf.js:

    module.exports = function(config) {
        // ...
        frameworks: [
            'jasmine',
            'jasmine-matchers' // here
        ],
    
        plugins: [
            'karma-chrome-launcher',
            'karma-firefox-launcher',
            'karma-jasmine',
            'karma-phantomjs-launcher',
            'karma-junit-reporter',
            'karma-jasmine-matchers'
        ]
        // ....
    };
    

    Here is a reference to official Karma config sample for jasmine-matchers.

    Also, if you don't have any plugins, then it would be enough just to specify a framework.