Trying to set up testing with Karma, Jasmine, and Webpack in AngularJS has been quite a journey for me. While my webpack is functioning smoothly and I can run my website using npm start, things take a turn when I attempt to include my app.js.
Despite numerous searches and attempts at solutions, integrating app.js seems to be causing some issues. It's not like I've given up easily; I've dedicated an entire day to googling and exploring potential fixes.
In my karma.conf.js file, you'll find the following configuration:
// 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({
// various settings here...
})
}
The unit test I've created looks like this:
describe('Unit testing Dash', function() {
var $compile,
$rootScope;
beforeEach(angular.mock.module('app'));
beforeEach(inject(function(_$compile_, _$rootScope_){
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('Replaces the element with the appropriate content', function() {
var element = $compile("<dash-list></dash-list>")($rootScope);
$rootScope.$digest();
expect(element.html()).toContain("Unpaid");
});
});
Unfortunately, running this test results in the following error:
Chrome 60.0.3112 (Mac OS X 10.12.6) ERROR
Uncaught SyntaxError: Unexpected token import
at resources/assets/js/auth/app.js:1
I'm working on OSX and logically, webpack should serve the compiled file to Karma. However, the 'unexpected token import' suggests that the file isn't being compiled and served properly.
If anyone comes across this question, know that I followed Felix's OPTION #1, by directly including the compiled files in Karma. This workaround proved to be effective as webpack automatically compiles files whenever changes are made.
My updated files array now includes:
files: [
'./node_modules/jasmine-core/lib/jasmine-core/jasmine.js',
'./node_modules/angular/angular.js',
'./node_modules/angular-mocks/angular-mocks.js',
'./resources/assets/js/account/stripe.spec.js',
'./node_modules/angular-stripe/index.js',
'./node_modules/angular-stripe-checkout/angular-stripe-checkout.js',
'./public/assets/vendor.bundle.js',
'http://localhost:8080/assets/account.js',
'./resources/assets/js/account/invoices/*.spec.js',
Even though the http usage was necessary for the second option, everything seems to be functioning seamlessly now.