RequireJS can not find dependencies with Karma

Question

This is my directory hierarchy:

• App
  • backend/
  • frontend/
    • controllers/
    • ...
  • test/
    • controllers/
    • ...
    • test-main-cfg.js
  • vendor/
    • angular/angular.min.js
    • underscore/underscore.js
    • ...
  • karma.conf.js

And this is the content of karma.conf.js:

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'requirejs'],
    files: [
      {pattern: 'test/**/*.spec.js', included: false},
      {pattern: 'vendor/angular/angular.min.js', included: false},
      {pattern: 'vendor/angular/angular-route.min.js', included: false},
      {pattern: 'vendor/angular/angular-mocks.js', included: false},
      {pattern: 'backend/public/**/*.js', included: false},
      {pattern: 'test/main.spec.js', included: false},
      'test/test-main-cfg.js'
    ],
    exclude: [
      '**/*.swp'
    ],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome', 'Firefox', 'Safari'],
    captureTimeout: 60000,
    singleRun: false
  });
};

And the following is test/test-main-cfg.js,the config file of requires and start point of karma:

var tests = [],
    file;
for (file in window.__karma__.files) {
  if (window.__karma__.files.hasOwnProperty(file)) {
    if (/.spec\.js$/.test(file)) {
      tests.push(file);
    }
  }
}

require.config({
  baseUrl: '/base/',
  paths: {
    'jquery': "vendor/jquery/dist/jquery.min",
    'angular': 'vendor/angular/angular.min',
    'angularRoute': 'vendor/anguar-route.min',
    'angularMocks': 'vendor/angular/angular-mocks',
    'underscore': 'vendor/underscore/underscore'
  },
  shim: {
    'underscore': {
      exports: '_'
    },
    // added
    'jquery': {
      exports: 'jquery'
    },
    'angular': {
      deps: ['jquery'],
      exports: 'angular'
    },
    'angularRoute': {
      deps: ['angular'],
      exports: 'angularRoute'
    },
    'angularMocks': {
      deps:['angular'],
      exports: 'angularMocks'
    }
  },
  deps: tests,
  callback: window.__karma__.start
});

One of my spec file is:

define(['underscore', 'jquery', 'angular', 'angularRoute', 'angularMocks'], function(_) {
  describe('UnitTest: ParamsSettings', function(_) {
    it('is defined', function() {
      expect(_.size([1,2,3])).toEqual(3);
    })
  })
});

I can not load any of the dependencies in the spec file. Great appreciation for your answers.

Edit:

The main.spec.js in karma.conf.js can be found using url http://localhost:9876/base/test/main.spec.js, but I have a file named another.spec.js, which is at the same directory of the former file, can not be found by url http://localhost:9876/base/test/another.spec.js.

Added the content afforded by @glepretre

Answer 1

The question was solved. Actually the Karma server did not serve any of my lib files. We should specify the location of the files that Karma server served by setting correct files option of karma.conf.js.

So I edited it as follows:

...,
files: [
  {pattern: 'vendor/angular/angular.min.js', included: false},
  {pattern: 'vendor/angular/angular-route.min.js', included: false},
  {pattern: 'vendor/angular/angular-mocks.js', included: false},
  {pattern: 'vendor/jquery/dist/jquery.min.js', included: false},
  {pattern: 'vendor/underscore/underscore.js', included: false},
  {pattern: 'backend/public/**/*.js', included: false},
  {pattern: 'test/*.spec.js', included: false},
  {pattern: 'test/**/*.spec.js', included: false},
  {pattern: 'test/main.spec.js', included: false},
  'test/test-main-cfg.js'
],
...

Practically it can more be simpler:

...,
files: [
  {pattern: 'vendor/**/*.js', included: false},
  {pattern: 'backend/public/**/*.js', included: false},
  {pattern: 'test/*.spec.js', included: false},
  {pattern: 'test/**/*.spec.js', included: false},
  {pattern: 'test/main.spec.js', included: false},
  'test/test-main-cfg.js'
],
...

And this is the official document of files option: Here

Answer 2

Shouldn't you add some shims ?

In your require config:

require.config({
  baseUrl: '/base/',
  paths: {
    'jquery': "vendor/jquery/dist/jquery.min",
    'angular': 'vendor/angular/angular.min',
    'angularRoute': 'vendor/anguar-route.min',
    'angularMocks': 'vendor/angular/angular-mocks',
    'underscore': 'vendor/underscore/underscore'
  },
  shim: {
    'underscore': {
      exports: '_'
    },

    // added
    'jquery': {
      exports: 'jquery'
    },
    'angular': {
      deps: ['jquery'],
      exports: 'angular'
    },
    'angularRoute': {
      deps: ['angular'],
      exports: 'angularRoute'
    },
    'angularMocks': {
      deps:['angular'],
      exports: 'angularMocks'
    }
  },
  deps: tests,
  callback: window.__karma__.start
});

in your spec file:

// moved underscore first to get the module in the function args
define(['underscore', 'jquery', 'angular', 'angularRoute', 'angularMocks'], 
  function(_) {
    describe('UnitTest: ParamsSettings', function() {
      it('is defined', function() {
        expect(_.size([1,2,3])).toEqual(3);
      });
  });
});

EDIT: By the way, if you want to see the starter app structure for angular projects using requireJS we've developped with my team. It's based on official Angular best practices for App structure and you can get it here: angular-requirejs-ready.