카르마 웹팩 재스민 유닛 테스트가 작동하지 않습니다.

Question

AngularJS의 Karma, Jasmine, Webpack으로 테스트를 설정하려고합니다. 내 webpack이 정상적으로 작동하며 내 웹 사이트를 실행할 수 있습니다. npm start

간단한 테스트가 작동하지만 app.js를 추가하려고하면 모든 것이 내리막 길을갑니다.

나는 많은 많은 검색과 많은 솔루션을 시도해 왔습니다. 제발 생각지 마라, 나는이 질문을 쓸데없는 순간에 쓰고있다. 나는 하루 종일 인터넷 검색을하고 인터넷 검색을 통해 가능한 해결책을 찾는다.

가 내 karma.conf.js이

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

의 I 작성한 테스트

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"); 
    }); 
}); 

입니다 파일입니다 그리고이 오류와 함께 실패합니다

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에게 컴파일 된 파일을 제공해야합니다. 그러나 예기치 않은 토큰 가져 오기은 파일이 컴파일되지 않고 카르마에 제공되었음을 의미합니다.

도와주세요.

나는 심지어 바벨과 컴파일하려고했지만 그 중 아무데도 가지 않았다. 우리는 이미 웹팩 설정이 구축 프로젝트가이 질문에 수염 사람에게 webpage.config

UPDATE

를 사용하여 컴파일되어 있기 때문에 내가 웹팩로 이동, 펠릭스하여 옵션 # 1을 사용했다. 나는 카르마에 컴파일 된 파일을 포함 시켰습니다. 그것은 매력처럼 일했습니다.

Webpack은 파일이 변경 될 때마다 자동으로 파일을 컴파일하므로 출력을 추가해도 문제가 없습니다.

내 파일 배열은 내가 불행하게도 2 옵션 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

당신이 카르마 파일에서주의를 기울이는 것은 사양을 실행하기 위해서만 웹팩에 전달하는 것입니다. 따라서 앱이 처리되지 않습니다.

1. 수동 카르마 당신에게 응용 프로그램 웹팩 번들을 추가
   당신은 두 가지 옵션이 있습니다.
2. 사양 내에서 "app"을 가져 오면 웹팩이 사양에서 시작하여 앱을 가져옵니다.