karma-webpack seems to break angular unit tests

I have recently converted a project I am working on over to webpack, including my unit tests for the Angular front-end. I have some unit tests written for some directives with custom transclusion/jquery/jqlite functionality in the link functions which passes in a webpack-less testing environment, yet when tested with karma-webpack they do not pass. Allow me to demonstrate:

Standard karma.conf.js

// Reference: http://karma-runner.github.io/0.12/config/configuration-file.html
module.exports = function(config) {
  config.set({

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


    files : [

        'public/tests.bundle.js'
    ],


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {

        'public/tests.bundle.js' : ['webpack', 'sourcemap']
    },


    // . . .


    webpack: {

        // Just do inline source maps instead of the default
        devtool: 'inline-source-map',

        module: { 

            loaders: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader'
                },
            ],
        }
    }
  });
};

Test bundle

// Doesn't work with or without this line
import 'jquery';

import 'angular';
import 'angular-mocks/angular-mocks';

var testsContext = require.context('.', true, /.+\.spec\.js$/);

testsContext.keys().forEach(testsContext);

Angular Directive in ES6

import directiveFactory from '../../directivefactory.js';

// ## Directive Definition
class pageHeader {

    constructor() {

        this.template =
        `
            <div class="d5-page-header-wrapper">

                <div class="d5-page-header">

                    <!-- Main page header text -->
                    <!-- component user content insertion point 1 -->
                    <span class="text-main" transclude-id="header"></span>

                    <!-- Small page header text -->
                    <!-- component user content insertion point 2 -->
                    <span class="text-small" transclude-id="small"></span>

                    <hr class="break">

                    <!-- Page header text lead -->
                    <!-- component user content insertion point 3 -->
                    <span class="text-lead" transclude-id="lead"></span>

                    <!-- Custom navigation button -->
                    <button class="btn btn-custom btn-block btn-lg">

                        Jump to Collections <span class="glyphicon
                            glyphicon-arrow-down"></span>

                    </button>

                </div>

            </div>
        `;
        this.restrict = 'E';
        this.scope = {};
        this.bindToController = {

        };
        this.transclude = true;
        this.controller = PageHeaderController;
        this.controllerAs = 'vm';
    }

    // ###Optional Link Function
    link (scope, elem, attrs, ctrl, transclude) {

        transclude ((clone) => {

            angular.forEach(clone, (cloneEl, value) => {

                // If the clone element has attributes...
                if(cloneEl.attributes) {

                    // Get desired target ID...
                    var tId = cloneEl.attributes["transclude-to"].value;

                    // Find target element with that ID...
                    var target = elem.find('[transclude-id="' + tId + '"]');

                    // Append element to target
                    target.append(cloneEl);
                }
            });
        });
    }
}

export default ['pageHeader', directiveFactory(pageHeader)];

Unit Test

describe('page header directive', () => {

    let elem, scope;

    // Mock our page-header directive
    beforeEach(angular.mock.module(pageHeader));

    beforeEach(angular.mock.inject(($rootScope, $compile) => {

        // Define the directive markup to test with
        elem = angular.element(
            `
            <div>

                <page-header>

                    <span transclude-to="header">

                        Test Header

                    </span>

                    <span transclude-to="small">

                        Test Small Header

                    </span>

                    <span transclude-to="lead">

                        Test Lead Content

                    </span>

                </page-header>

            </div>
            `
        );

        scope = $rootScope.$new();

        $compile(elem)(scope);

        scope.$digest();
    }));

    describe('link transclusion function', () => {

        it("should create a main header element containing the component " +
            "user's markup", () => {

            let items = elem.find('.text-main');

            console.log(items);

            // FAIL
            expect(items.eq(0).text()).toContain('Test Header');
        });
    });
});

I am not sure if this is the right place to post this or not, but it seems the problem lies in my implementation or karma-webpack as the code works in the browser as it should. In any case, I’d appreciate the help with the matter.

[mattzaitley]

I’m having similar problems - any luck solving @datatypevoid?

[joshwiens]

If I can get a minimal repo where this issue is reproducible, i’ll get it into the v3 milestone and see that it’s addressed.

Something like this - https://github.com/Silviu-Marian/karma-webpack-pr69 would be extremely helpful.