Setting up Jasmine: Getting undefined is not an object in jasmine.js - jasmine

I am trying to do the initial set up of jasmine to write unit tests for my code. When I run 'karma start unit-tests.conf.js' I keep encountering this error:
I am not sure what it means. If you can't read the error it goes like this:
PhantomJS 2.1.1 (Windows 8 0/0/0) Error
TypeError: undefined is not an object (evaluating 'spacDefinitions.length')
at C:/Users/GoogleDrive/.../node_modules/jasmine-core/lib/jasmine-core/jasmine.js:830
Below is my config file. Did I not configure it correctly? Is there anything I am missing?
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'lib/ionic/js/ionic.bundle.js',
'lib/angular-mocks/angular-mocks.js',
'js/*',
'index.controller.js',
'layout/mainView.directive.js',
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
Thank you for any help!

In your karma config i don't see entry for angular.min.js in 'files' section. replace your files section with:-
files: [
'lib/ionic/js/ionic.bundle.js',
'lib/angular.min.js',
'lib/angular-mocks/angular-mocks.js',
'js/*',
'index.controller.js',
'layout/mainView.directive.js',
],
Assuming angular.min.js is placed in lib folder.
It should work.

Related

Karma + Webpack + sourcemap preprocessor doesn't stop at breakpoints in WebStorm

I'm starting a project the NG6-Kit-starter.
I'm using WebStorm.
I want to be able to debug my unit tests using WebStorm, so I followed this tutorial.
I can run unit test from WebStorm but I can't put breakpoints, it never stops at breakpoints and I have don't know why.
I suspect it has to do something with the fact that I'm using a preprocessor in my karma config file.
preprocessors: { 'spec.bundle.js': ['webpack', 'sourcemap'] },
See below my full karma.config.js
module.exports = function (config) {
config.set({
// base path used to resolve all patterns
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha', 'sinon-chai'],
// list of files/patterns to load in the browser
files: [{ pattern: 'spec.bundle.js', watched: false }],
// files to exclude
exclude: [],
plugins: [
require("karma-sinon-chai"),
require("karma-chrome-launcher"),
require("karma-mocha"),
require("karma-mocha-reporter"),
require("karma-sourcemap-loader"),
require("karma-webpack")
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: { 'spec.bundle.js': ['webpack', 'sourcemap'] },
webpack: {
//devtool: 'inline-source-map',
devtool: 'source-map',
module: {
loaders: [
{ test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.(scss|sass)$/, loader: 'style!css!sass' },
{ test: /\.css$/, loader: 'style!css' },
{ test: /\.svg/, loader: 'svg-url-loader' },
{ test: /\.json$/, loader: 'json-loader' }
]
}
},
webpackServer: {
noInfo: true // prevent console spamming when running in Karma!
},
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha'],
// web server port
port: 9876,
// enable colors in the output
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_DEBUG,
// toggle whether to watch files and rerun tests upon incurring changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// if true, Karma runs tests once and exits
singleRun: true
});
};
And my spec.bundle.js file:
import angular from 'angular';
import mocks from 'angular-mocks';
let context = require.context('./client/app', true, /\.spec\.js/);
context.keys().forEach(context);
Does anyone know how to make this work with WebStorm in order to be able to put breakpoints in unit tests ?
Just tried 2017.1 EAP - karma debugging works out of the box:
right-click karma.config.js
debug - breakpoints in client/app/common/hero/hero.spec.js are hit.
In 2016.3.2 I have to refresh the browser page (the one that has JetBrains IDE Extension enabled) to get breakpoints hit.
Thanks for your reply, it helped me find what I was doing wrong. So I tested like you did and it is working exactly as you say (you have to refresh on Webstorm 2016 and it's working out of the box with the EAP version).
SO I went commit by commit (I did 4 commit) to find out what I was doing wrong:
I'm new with webpack and when I was experimenting some stuff I tried changing this setting in karma.conf.js:
Replacing:
webpack: {
devtool: 'inline-source-map',
By:
webpack: {
devtool: 'source-map',
Changing it back solved my issue. The unit tests now stops at breakpoints
I did a bit of research to understand better what this setting is, have a look at this question if you're interested: Why inline source maps?

Can't run initial karma.conf.js that I get from "karma init" because of "require not defined" despite not using it

I ran a simple karma init and pressed enter throughout the process to get the following karma.conf.js:
// Karma configuration
// Generated on Thu Jan 21 2016 10:32:15 GMT-0600 (CST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'**/*.spec.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
However, after trying to run a simple test that looks like:
describe('test', function() {
it('should return true', function() {
expect(true).toEqual('true');
})
});
While it runs, I get the following output:
1 01 2016 10:32:47.879:WARN [karma]: No captured browser, open http://localhost:9876/
21 01 2016 10:32:47.888:INFO [karma]: Karma v0.13.19 server started at http://localhost:9876/
21 01 2016 10:32:47.892:INFO [launcher]: Starting browser Chrome
21 01 2016 10:32:50.192:INFO [Chrome 47.0.2526 (Mac OS X 10.11.3)]: Connected on socket /#RpTiNDwYyXuP29hTAAAA with id 21512010
Chrome 47.0.2526 (Mac OS X 10.11.3) ERROR
Uncaught ReferenceError: require is not defined
at /Users/sgarcia/dev/karma/hello-karma/node_modules/karma-chrome-launcher/test/jsflags.spec.js:1
Why does it say it can't find requireJS despite me not using it?
The problem is your list of files:
files: [
'**/*.spec.js'
],
That will catch ALL your *.spec.js files, which is why it found "/Users/sgarcia/dev/karma/hello-karma/node_modules/karma-chrome-launcher/test/jsflags.spec.js" which is a test for the developers of karma-chrome-launcher itself, which does indeed have a call to requireJS, and which you probably don't want to include in your test suite :-)
Consider place all your test files in ./test and changing you karma.conf.js files section to something like:
files: [
'js/**/*.js',
'tests/**/*.spec.js'
],

Define is not defined

I really really want to get jasmine-jquery working with jasmine. Not only will it make manipulating the DOM a breeze but it will also provide me with a ton of useful matchers.
However, it gives me this error when I try to start my spec runner:
ReferenceError: Can't find variable: define
at /.../app/vendor/assets/bower_components/jquery/src/jquery.js:37
Any idea what this means? I'm using Karma to run my specs. Here's my unit.js config:
module.exports = function(config) {
config.set({
basePath: '..',
// frameworks to use
frameworks: ['jasmine'],
urlRoot: '/_karma_/',
// list of files / patterns to load in the browser
files: [
'vendor/assets/bower_components/angular/angular.js',
'vendor/assets/bower_components/angular-mocks/angular-mocks.js',
'vendor/assets/bower_components/angular-resource/angular-resource.js',
'vendor/assets/bower_components/angular-cookies/angular-cookies.js',
'vendor/assets/bower_components/angular-sanitize/angular-sanitize.js',
'vendor/assets/bower_components/angular-route/angular-route.js',
'vendor/assets/bower_components/jquery/src/jquery.js', // added this first
'vendor/assets/jasmine-jquery.js', // and then this...
'vendor/assets/bower_components/jasmine-jquery/lib/jasmine-jquery.js',
'app/assets/javascripts/application.js.coffee',
'app/assets/javascripts/**/**',
'spec/javascripts/**/*'
],
// list of files to exclude
exclude: [
],
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['dots'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
autoWatch: true,
plugins : [
'jasmine-given',
'requirejs',
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-opera-launcher',
'karma-jasmine',
'karma-ng-scenario',
'karma-phantomjs-launcher',
'karma-coffee-preprocessor'
],
browsers: ['PhantomJS','Chrome','Firefox','Opera'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false,
// Preprocessors
preprocessors: {
'/**/*.coffee':'coffee',
'**/*.slim': ['slim', 'ng-html2js']
}
/*
ngHtml2JsPreprocessor: {
stripPrefix: 'app/assets/templates/',
stripSufix: '.slim'
}
*/
});
All I've done, per the instructions is download jquery, download jasmine-jquery and then require them in Karma's spec file:
files: [
'vendor/assets/bower_components/jquery/src/jquery.js', // added this first
'vendor/assets/jasmine-jquery.js', // and then this...
]
But jquery keeps giving me that undefined is not defined error.
I get no warnings from karma about the paths being wrong.
So how do I get jasmine-jquery working?
Could requirejs have something to do with getting it working?
As mentioned in the response to this question you need to make sure you npm download jasmine-query.
You'll need to change the following in you karma.conf.js:
frameworks: ['jasmine-jquery', 'jasmine']

No provider for Jasmine-jquery?

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_'
});
};
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 karma-jasmine#0.2.0 --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

Can not load "teamcity", it is not registered! Perhaps you are missing some plugin?

I'm trying to run my karma (version v0.10.2) unit tests on teamcity (version 7.1).
When I run karma start --reporters teamcity --single-run I get the following error:
Can not load "teamcity", it is not registered! Perhaps you are missing some plugin?
I have installed the karma-teamcity-reporter module, but that hasn't helped.
The following are installed in my local node_modules folder:
karma
karma-chrome-launcher
karma-coffee-preprocessor
karma-coverage
karma-firefox-launcher
karma-html2js-preprocessor
karma-jasmine
karma-phantomjs-launcher
karma-requirejs
karma-script-launcher
karma-teamcity-reporter
Here is my karma.conf.js:
I'm running karma version v0.10.2. Here's my karma.conf.js:
module.exports = function(karma) {
karma.set({
// base path, that will be used to resolve files and exclude
basePath: '../../myapplication.web',
frameworks: ['jasmine'],
plugins: [
'karma-jasmine',
'karma-coverage',
'karma-chrome-launcher',
'karma-phantomjs-launcher'
],
// list of files / patterns to load in the browser
files: [
'Scripts/jquery/jquery-2.0.2.min.js',
'Scripts/jquery-ui/jquery-ui-1.10.3.min.js',
'Scripts/daterangepicker/daterangepicker.js',
'Scripts/angular/angular.js',
'Scripts/angular/restangular/underscore-min.js',
'Scripts/angular/restangular/restangular-min.js',
'Scripts/angular/angular-*.js',
'Scripts/angular/angular-test/angular-*.js',
'Scripts/angular/angular-ui/*.js',
'Scripts/angular/angular-strap/*.js',
'Scripts/angular/angular-http-auth/*.js',
'Scripts/sinon/*.js',
'Scripts/moment/moment.min.js',
'uifw/scripts/ui-framework-angular.js',
'app/app.js',
'app/**/*.js',
'Tests/unit/**/*.js'
],
// list of files to exclude
exclude: [
'Scripts/angular/angular-test/angular-scenario.js'
],
// test results reporter to use
// possible values: 'dots', 'progress', 'junit'
reporters: ['progress', 'coverage', 'teamcity'],
preprocessors : {
'app/**/*.js': ['coverage']
},
coverageReporter : {
type: 'html',
dir: 'Tests/coverage/'
},
// web server port
port : 9876,
// cli runner port
runnerPort : 9100,
// enable / disable colors in the output (reporters and logs)
colors : true,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel : karma.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch : true,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['PhantomJS'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout : 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun : true
});
};
If I run karma start karma.conf.js it runs correctly. What am I doing wrong?
Turned out I needed to add karma-teamcity-reporter to the plugins section to get this to work:
...
plugins: [
'karma-teamcity-reporter',
'karma-jasmine',
'karma-coverage',
'karma-chrome-launcher',
'karma-phantomjs-launcher'
],
...

Resources