getting 'require is not defined' when testing in angularjs with karma

Question

I am using angulajs with browersify to build an app. To test it, I'd like to use Karma. I jave set up my conf file like this:

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

    basePath: '',

    frameworks: ['jasmine', 'browserify'],

    files: [
      'node_modules/angular/angular.js',
      'node_modules/angular-mocks/angular-mocks.js',
      'src/app/*',
      'src/app/*/*'
    ],

    exclude: [
      'src/app/*/*.jade'
    ],

    reporters: ['progress'],

    port: 9876,

    colors: true,
    logLevel: config.LOG_INFO,

    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,

    browserify: {
      debug: true
    },

    preprocessors: {'src/app/*/*.js': ['browserify']}
  });
};

And my app.js file looks like this:

    require('angular')
require('angular-mocks')

var uiRouter          = require('angular-ui-router')
var serices    = require('./services')
var directives  = require('./directives')
var controllers = require('./controllers')
var routes            = require('./routes')

angular.module('myApp', [uiRouter, 'ngMocks'])
  // load Routes
  .config(routes)

  // Services
  .service('someService', services.someService)

  // Controllers
  .controller('myCtrl', controllers.myCtrl)

  // Directives
  .directive('myDirective', directives.myDirective);

I am using karma-browserify but I still get the following error when running test:

'require is not defined'

How can I fix this?

Answer 1

You need to run browserify on your unit test files and include them in the files. I'm here including bundled.js, which is browserified app code.

This one is close to yours and it works.

(function() {
    'use strict';
    // Karma configuration

    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: ['mocha', 'chai-as-promised', 'chai', 'browserify'],

            // list of files / patterns to load in the browser
            files: [
                // app-specific code. This should be generated by gulp browserify. Includes Angular
                'webapp/bundled.js',
                // 3rd-party resources
                'node_modules/angular-mocks/angular-mocks.js',
                // test files
                'unit/**/*.js'
            ],
            // list of files to exclude
            exclude: ['karma.conf.js', 'protractor-conf.js'],
            // Browserify config
            browserify: {
                watch: true,
                debug: true
            },
            // preprocess matching files before serving them to the browser
            // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
            preprocessors: {
                'unit/**/*.js': ['browserify']
            },

            // 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

            // - IE
            // - Chrome
            // - ChromeCanary
            // - Firefox
            // - Opera
            // - Safari
            // - PhantomJS
            browsers: ['Chrome', 'IE', 'Firefox'],

            // Continuous Integration mode
            // if true, Karma captures browsers, runs the tests and exits
            singleRun: true
        });
    };
})();