Karma Jasmine AngularJs define is not defined

Question

I am writing unit tests for angularjs application using karma Jasmine. When i am trying to run command karma start it throws an error like Uncaught ReferenceError: define is not defined. Basically i am trying to load a separate module(whose file starts with a define keyword.) which has a dependency in my application module using karma config file, in files section.

I have no idea why this is happening and any help would be greatly appreciated.

Jakub Rybiński Jakub Rybiński · Accepted Answer · 2018-03-16T15:32:31

I had similar problem and it wasn't so easy to find the solution. Next time provide some code, in this case your Karma and Jasmine configuration files because they are responsible for this kind of problems. You probably haven't used or haven't configured RequireJS for Karma. This link should be helpful. Karma - RequireJS documentation

Just write 'karma init' in console, choose "yes" for Require.js. More details in link.

Very important is to have correct folder structure and play where you have your karma.conf.js and test-main.js(RequireJS config file).

The example structure that I decide to use after hours of research and trials and errors.

.
- karma
├── karma.conf.js
├── build
|   ├── js
|   └── tests
|        ├── test-main.js
|        ├── tes

karma.conf.js

// Karma configuration
// Generated on Fri Mar 16 2018 09:14:49 GMT+0100 (CET)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    frameworks: ['jasmine', 'requirejs'],


    // list of files / patterns to load in the browser
    files: [
        'build/tests/test-main.js',
        {pattern: 'build/**/*.js', included: false},
        {pattern: 'documents/exampleData/**/*.js', included: false},
        {pattern: 'node_modules/**/*-min.js', included: false},
        {pattern: 'node_modules/d3/build/d3.js', included: false},
        {pattern: 'node_modules/jquery/dist/jquery.min.js', included: false},
        {pattern: 'build/tests/**/*.js', included: false},
    ],


    // list of files / patterns 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
  })
}

test-main.js

var tests = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
var BASE_URL = '/base/build/js';
var BASE_URL_REGEXP = /^\/base\/build\/js\/|\.js$/g;

// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function (file) {
    if (TEST_REGEXP.test(file)) {
      var normalizedTestModule = file.replace(BASE_URL_REGEXP, '')
        tests.push(normalizedTestModule)
    }
})

require.config({
  // Karma serves files under /base, which is the basePath from your config file
    baseUrl: BASE_URL,
    paths: {
        'env': 'env',
        'Utils': './utils/utils',
        'exampledata' : '../../documents/exampleData',
        'jquery': '../../node_modules/jquery/dist/jquery.min',
        'underscore': '../../node_modules/underscore/underscore-min',
        'backbone': '../../node_modules/backbone/backbone-min',
        'backbone.touch': '../../node_modules/backbone.touch/dist/backbone.touch.min',
        'd3' : '../../node_modules/d3/build/d3'
    },
    shim: {
        'underscore': {
            exports: '_'
        }
    },

    deps: tests,

  // we have to kickoff jasmine, as it is asynchronous
  callback: window.__karma__.start
})

This solution for now maybe isn't perfect but it works. I will be very satisfied if I will find something like that at the beginning of research. I will update it when I get a little bit familiar with best practices of test frameworks configuration.

Karma Jasmine AngularJs define is not defined

1 Answers