"Errore: non corrispondente anonimo define()" con Karma + RequireJS + Jasmine

Question

Sono bloccato per un po 'cercando di ottenere il test dell'unità impostato e runnning.

Ho un front-end AngularJS caricato con RequireJS e r.js ottimizzato per la produzione, quindi è tutto in un unico file. Funziona!

Ciò che non funziona è eseguire i test dell'unità. Non è niente di eccezionale finora, ho appena copiato un antipasto da un tutorial.

tests/user/user.test.js:

define(['angular', 'angular-mocks', 'app'], function(angular, app) { 
    describe('Unit: UserController', function() { 
    beforeEach(module('user.app')); 

    it('should do something', function() { 
     console.log('did it'); 
    }); 
    }); 
}); 

poi ho un karma.conf.js:

module.exports = function(config) { 
    config.set({ 
    logLevel: config.LOG_DEBUG, 
    basePath: './', 

    files: [ 
     // r.js'd app files 
     {pattern: 'dist/app.js', included: false}, 
     // the tests 
     {pattern: 'tests/**/*.test.js', included: true}, 
    ], 

    excluded: ['tests/main.test.js'] 

    frameworks: ['jasmine', 'requirejs'], 

    browsers: ['PhantomJS'], 

    plugins: [ 
     'karma-jasmine', 
     'karma-junit-reporter', 
     'karma-phantomjs-launcher', 
     'karma-requirejs' 
    ], 

    }); 
}; 

A main.test.js:

var allTestFiles = []; 
var TEST_REGEXP = /(spec|test)\.js$/i; 

var pathToModule = function(path) { 
    var returnValue = path.replace(/^\/base\//, '').replace(/\.js$/, ''); 
    return returnValue; 
}; 

Object.keys(window.__karma__.files).forEach(function(file) { 
    if (TEST_REGEXP.test(file)) { 
    // Normalize paths to RequireJS module names. 
    allTestFiles.push(pathToModule(file)); 
    } 
}); 

require.config({ 
    baseUrl: '/base', 

    paths: { 
    'angular-mocks': 'node_modules/angular-mocks/angular-mocks', 
    'app': 'dist/app', 
    }, 

    deps: allTestFiles, 

    callback: function() { 
    console.log('load complete'); 
    window.__karma__.start(); 
    }, 
}); 

E infine un compito gulp:

012.

var gulp = require('gulp'); 
var karma = require('karma').server; 

gulp.task('unit-test', function(done) { 
    karma.start({ 
    configFile: __dirname + '/karma.conf.js', 
     singleRun: true 
    }, function() { done(); }); 
} 

Qui e là ho aggiunto alcune uscite di registro e mostra che i file sono stati caricati.

Ma io sono bloccato ottenendo questo Error: Mismatched anonymous define() nel tests/user/user.test.js e non vedo cosa c'è di sbagliato. Ecco l'output: http://pastebin.com/evJPj9B3

Se il nome del modulo di test di unità come

define('namedtestorso', ['angular', 'angular-mocks', 'app'], function(angular, app) { 
    ... 

... non ottengo un errore più ma i test non vengono eseguiti. Dal momento che tutti gli esempi posso ricordare di usarlo come definizione anonima, presumo che la denominazione non sia corretta qui. Ma in questo caso l'output del registro viene eseguito mostrando che il callback di configurazione da main.test.js viene eseguito due volte. (È un suggerimento per qualcosa?)

Sarebbe bello se qualcuno avesse un'idea su come risolverlo/farlo funzionare o anche come continuare a scoprire cosa c'è che non va. Grazie in anticipo!

Answer 1

ora preso in esecuzione in modo lascerà la mia soluzione qui:

credo di aver capito un po 'meglio ora come karma opere (pls mi dicono se sbaglio), e così trovato quello che dovevo fare.

Sembra quasi di mettere i file nello karma.conf.js in modo che siano disponibili per il main.test.js da caricare. Altrimenti sono fuori dal "contesto" e non sono accessibili. Ma quando ci si inserisce, assicurarsi di impostare il flag included su false.

Modifiche al karma.conf.js:

files: [ 
    ... 
    // Also included these dependencies. All the others are minified in the 
    // app.js but if you don't do that, also include all project deps like 
    // AngularJS etc. 
    { pattern: 'node_modules/jasmine-core/lib/jasmine-core/boot.js', included: false }, 
    { pattern: 'node_modules/angular-mocks/angular-mocks.js', included: false}, 

    // Then I had an error in my pattern ('tests/**/*.test.js') 
    // Only the `main.test.js` is supposed to be included! 
    { pattern: 'tests/user/user.test.js', included: false } 
    { pattern: 'tests/main.test.js', included: true } 
    ... 

se sono corrette Karma crea un file HTML e file con included: true verranno caricati tramite tag script. Ecco perché se si utilizza RequireJS è importante impostare include su false in quanto si otterrà il Error: Mismatched anonymous define() se lo si fa. Quindi questo ora ha senso per me.

Dopo aver risolto questo problema lì dove alcuni altri con moduli non trovati. Poiché ho utilizzato l'ottimizzatore RequireJS, ho dovuto "mappare" tutti i miei moduli ai file principali app.js in modo che quando i file JS di test richiedevano un determinato modulo, RequireJS poteva assicurarsi che fosse (o ottenuto) caricato.

così ho finito per cambiare la sezione paths in main.test.js:

paths: { 
    // Added these for example 
    'angular': '../dist/app', 
    'angular-ui-router': '../dist/app', 
    // (and also my project modules) 
    ... 

destro, che sembra un po 'hacky. Nel frattempo, dopo aver risolto questo problema, cambio anche il mio flusso di lavoro per eseguire il test unitario sui file dev e fare affidamento sugli altri strumenti per funzionare correttamente (e se non sui problemi che devono essere rilevati dai test di e2e).

Spero che aiuti gli altri nella mia situazione!

Answer 2

Esattamente se si va a requirejs sito afferma questo errore se hai inserito alcun tag script in html questo significa HTML fornito dal karma

Così in karma.conf.js quando si includono i file come: file [ '/base/src/scripts/xyz.js'] a mio parere si aggiunge come un tag script e u continuare a ottenere errore: il modulo non corrispondente anonimo definire()

esempio modello provare: { pattern: '/base/src/scripts/xyz.js', incluso: false} che impedisce l'aggiunta di js nei tag script