カルマウェブパックジャスミンユニットテストが動作しない

Question

私は、カルマ、ジャスミン、ウェブパックをAngularJSでテストを設定しようとしています。 私のwebpackは正常に動作しています。私はウェブサイトを利用できます。npm start

単純なテストはうまくいきますが、app.jsを追加しようとするとすべてが下り坂になります。

私は多くの多くの検索と多くのソリューションを試しました。私は黙っていた瞬間、この質問を書いています。私は今日一日中グーグルで過ごし、可能な解決策を見つけました。

私karma.conf.jsは、私が書いたテストが

describe('Unit testing Dash', function() { 
    var $compile, 
     $rootScope; 

    // Load the myApp module, which contains the directive 
    beforeEach(angular.mock.module('app')); 

    // Store references to $rootScope and $compile 
    // so they are available to all tests in this describe block 
    beforeEach(inject(function(_$compile_, _$rootScope_){ 
     // The injector unwraps the underscores (_) from around the parameter names when matching 
     $compile = _$compile_; 
     $rootScope = _$rootScope_; 
    })); 

    it('Replaces the element with the appropriate content', function() { 
     // Compile a piece of HTML containing the directive 
     var element = $compile("<dash-list></dash-list>")($rootScope); 
     // fire all the watches, so the scope expression {{1 + 1}} will be evaluated 
     $rootScope.$digest(); 
     // Check that the compiled element contains the templated content 
     expect(element.html()).toContain("Unpaid"); 
    }); 
}); 

であり、それがこのエラーで失敗し

// Karma configuration 
// Generated on Mon Sep 18 2017 09:27:36 GMT+1000 (AEST) 

var webpackConfig = require('./webpack.config.js'); 


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

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

    frameworks: ['jasmine'], 

    // ... normal karma configuration 
    files: [ 
     './node_modules/jasmine-core/lib/jasmine-core/jasmine.js', 
     './node_modules/angular/angular.js',          // angular 
     './node_modules/angular-mocks/angular-mocks.js',       // loads our modules for tests 

     // all files for test 
     './resources/assets/js/auth/app.js', 
     './resources/assets/js/account/invoices/*.spec.js', 
    ], 

    preprocessors: { 
     // add webpack as preprocessor 
     './resources/assets/js/account/invoices/*.spec.js':  ['webpack'], 
    }, 

    webpack: { 
     // webpack configuration 
     webpackConfig 
    }, 

    webpackMiddleware: { 
     // webpack-dev-middleware configuration 
     // i. e. 
     stats: 'errors-only' 
    }, 

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

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

ファイルがあります：

18 09 2017 15:00:18.554:DEBUG [web-server]: serving (cached): project/resources/assets/js/account/invoices/dash.spec.js 
18 09 2017 15:00:18.557:DEBUG [web-server]: serving (cached): project/resources/assets/js/account/invoices/add-business.spec.js 
18 09 2017 15:00:18.576:DEBUG [web-server]: serving: project/node_modules/karma/static/context.js 
Chrome 60.0.3112 (Mac OS X 10.12.6) ERROR 
    Uncaught SyntaxError: Unexpected token import 
    at resources/assets/js/auth/app.js:1 

私はOSXを使用します。技術的には、webpackはKarmaにコンパイルされたファイルを提供する必要があります。しかし予期しないトークンのインポートは、ファイルがカルマにコンパイルされていないことを意味します。

助けてください。

私はさらにバベルとコンパイルしようとしましたが、それはどこにも行きませんでした。私たちはすでにのWebPACKの設定が組み込まれていて、プロジェクトがこの質問時に無精ひげ誰にwebpage.config

UPDATE

を使用してコンパイルされるためのWebPACKに移動し、私はフェリックスによってOPTION＃1を使用しました。 私はカルマにコンパイルされたファイルを含めました。それは魅力のように働いた。

Webpackはファイルが変更されるたびにファイルを自動コンパイルするので、出力を追加するだけで正常に動作します。

マイファイルの配列は、私は残念ながら第二のオプションのためのhttpを使用していたが、それは正常に動作している

files: [ 
    './node_modules/jasmine-core/lib/jasmine-core/jasmine.js', 
    './node_modules/angular/angular.js',          // angular 
    './node_modules/angular-mocks/angular-mocks.js',       // loads our modules for tests 
    './resources/assets/js/account/stripe.spec.js', 
    './node_modules/angular-stripe/index.js', 
    './node_modules/angular-stripe-checkout/angular-stripe-checkout.js', 

    // all files for test 
    './public/assets/vendor.bundle.js', 
    'http://localhost:8080/assets/account.js', 
    './resources/assets/js/account/invoices/*.spec.js', 

を以下のように見えました。

Answer 1

カルマファイルでは、スペックを実行するためにのみウェブパックに渡すことに注意してください。したがって、あなたのアプリは処理されません。

あなたは2つのオプションがあります：

1. は手動でカルマにあなたのアプリWebPACKのバンドルを追加します。
2. スペック内から「app」をインポートすると、スペックからwebpackが起動し、アプリがインポートされます。