How do unit test with angular-translate

it's a known issue, please follow the documentation here: unit testing angular

The solution

Unfortunately, this issue is caused by the design of angular-translate. To get around these errors, all we can do is to overwrite our module configuration in our test suite, that it doesn't use asynchronous loader at all. When there's no asynchronous loader, there's no XHR and therefore no error.

So how do we overwrite our module configuration at runtime for our test suite? When instantiating an angular module, we can always apply a inline function which is executed as configuration function. This configuration function can be used to overwrite the modules configuration since we have access to all providers.

Using the $provide provider, we can build a custom loader factory, which should then be used instead of the static files loader.

beforeEach(module('myApp', function ($provide, $translateProvider) {  $provide.factory('customLoader', function () {    // loader logic goes here  });  $translateProvider.useLoader('customLoader');}));

Please read more in the above link provided.

We took the approach of ignoring the translation loader in unit tests, rather than being forced to modify each of the spec files.

One way to do it could be by separating the loader configuration to a separate file and then exclude it in karma.

So for example you can create a file app-i18n-loader.js (all other module configurations takes place in a different file):

    angular    .module('myApp')    .config(loaderConfig);loaderConfig.$inject = ['$translateProvider', '$translatePartialLoaderProvider'];function loaderConfig($translateProvider, $translatePartialLoaderProvider) {    $translateProvider.useLoader('$translatePartialLoader', {        urlTemplate: 'assets/i18n/{part}/{lang}.json'    });    $translatePartialLoaderProvider.addPart('myApp');}

And in your karma.conf.js exclude the file:

        files: [        'bower_components/angular/angular.js',        'bower_components/angular-mocks/angular-mocks.js',        //...        'bower_components/angular-translate/angular-translate.js',        'bower_components/angular-translate-loader-partial/angular-translate-loader-partial.js',        'app/**/*.mdl.js',        'app/**/*.js'    ],    exclude: [        'app/app-i18n-loader.js'    ],

(Note: Answer edited to a solution that does not require grunt/gulp).

I wanted a solution,

1. which was not too hacky
2. which didn't require me to change my actual application code,
3. which wouldn't interfere with the ability to load additional modules
4. and most importantly which wouldn't require me to change everysingle test.

This is what I ended up with:

// you need to load the 3rd party module firstbeforeEach(module('pascalprecht.translate'));// overwrite useStaticFilesLoader to get rid of request to translation filebeforeEach(module(function ($translateProvider) {    $translateProvider.useStaticFilesLoader = function () {    };}));

Assuming you don't need the actual translations for your unit tests, this works great. Just put the beforeEach on a global level, preferably in it's own file inside the test folder. It will be executed before every other test then.