Search code examples
angularkarma-runnersystemjs

Why does Karma fail to add the global babel polyfill?


I am working on an Angular project that does not, and cannot for now, use the Angular CLI. So I am trying to setup a Karma config but I get this error:

> karma start karma.conf.js

15 05 2018 16:23:28.330:WARN [framework.detect-browsers]: No launcher found 
for browser Chrome, it will not be used.

15 05 2018 16:23:28.334:WARN [framework.detect-browsers]: No launcher found 
for browser Firefox, it will not be used.

15 05 2018 16:23:28.335:WARN [framework.detect-browsers]: No launcher found 
for browser IE, it will not be used.

15 05 2018 16:23:28.400:WARN [watcher]: Pattern 
"C:/thing/node_modules/systemjs/dist/system-polyfills.js" 
does not match any file.

15 05 2018 16:23:37.118:WARN [watcher]: All files matched by 
"C:\thing\node_modules\karma-systemjs\lib\adapter.js" 
were excluded or matched by prior matchers.

IE 11.0.0 (Windows 10 0.0.0) ERROR
  {
    "message": "'Promise' is undefined\nat 
    node_modules/systemjs/dist/system.js:4:36898\n\nReferenceError: 'Promise' is undefined\n   at Anonymous function 
    (node_modules/systemjs/dist/system.js:4:36898)\n at Global code 
    (node_modules/systemjs/dist/system.js:4:2)", "str": "'Promise' is undefined\nat 
node_modules/systemjs/dist/system.js:4:36898\n\nReferenceError: 'Promise' is 
undefined\n   at Anonymous function 
(node_modules/systemjs/dist/system.js:4:36898)\n   at Global code 
(node_modules/systemjs/dist/system.js:4:2)"
  }


PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  {
    "message": "ReferenceError: Can't find variable: Promise\nat 
node_modules/systemjs/dist/system.js:4:36908",
    "str": "ReferenceError: Can't find variable: Promise\nat 
node_modules/systemjs/dist/system.js:4:36908"
  }
Chrome 66.0.3359 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.006 secs / 0 
 secs)
Firefox 59.0.0 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.014 secs / 0 
secs)
npm ERR! Test failed.  See above for more details.

I have absolutely no idea why this is happening now. I clearly have the launchers as plugins. I am grabbing the babel polyfill as the first file, and yet the error tells me I have no launchers (launches the browsers anyway), and then crashes out with this error about lacking the polyfill. Why the tests also error as executing 0 of 0 I am also at a loss. Anyone know the problem please?

// Karma configuration

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

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

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

    detectBrowsers: {
        enabled: true,

        // enable/disable phantomjs support, default is true
        usePhantomJS: true,

        postDetection: function (availableBrowser) {
            /* Karma configuration with custom launchers
              customLaunchers: {
                IE9: {
                  base: 'IE',
                  'x-ua-compatible': 'IE=EmulateIE9'
                }
              }
            */

            var result = availableBrowser;

            //Remove PhantomJS if another browser has been detected
            if (availableBrowser.length > 1 && availableBrowser.indexOf("PhantomJS") > -1) {
                const i = result.indexOf("PhantomJS");

                if (i !== -1) {
                    result.splice(i, 1);
                }
            }

            return result;
        }
    },

    systemjs: {
        config: {
            paths: {
                "typescript": "node_modules/typescript/lib/typescript.js",
                "systemjs": "node_modules/systemjs/dist/system.js"
            },
            map: {
                "app": "script.es5/app",
                "unittests": "script.es5/unittests",
                "rxjs": "node_modules/rxjs",
                "crypto": "@empty", // Hack : had to do this to get it to work! 
                "@angular": "node_modules/@angular"
            },
            packages: {
                "app": {
                    defaultExtension: "js",
                    format: "register"
                },
                "unittests": {
                    defaultExtension: "js"
                },
                "@angular/core": { defaultExtension: "js", main: "index.js" },
                "@angular/common": { defaultExtension: "js", main: "index.js" },
                "@angular/compiler": { defaultExtension: "js", main: "index.js" },
                "@angular/router": { defaultExtension: "js", main: "index.js" },
                "@angular/platform-browser": { defaultExtension: "js", main: "index.js" },
                "@angular/platform-browser-dynamic": { defaultExtension: "js", main: "index.js" },
                "rxjs": {
                    defaultExtension: "js"
                }
            },
            transpiler: "typescript"
        },
        serveFiles: [
            "node_modules/**/*.js",
            "script.es5/**/*.js"
        ]
    },

    // list of files / patterns to load in the browser
    files: [
        { pattern: "node_modules/babel-polyfill/dist/polyfill.min.js", watched: false },
        ////{ pattern: "node_modules/zone.js/dist/zone.js", watched: false },
        ////////{ pattern: "node_modules/reflect-metadata/Reflect.js", watched: false },

        ////{ pattern: "node_modules/rxjs/**/*.js", included: false, watched: false },
        ////{ pattern: "node_modules/rxjs/**/*.js.map", included: false, watched: false },

        ////{ pattern: "node_modules/@angular/**/*.js", included: false, watched: true },
        ////{ pattern: "node_modules/@angular/**/*.js.map", included: false, watched: true },

        // Unit tests
        ////{ pattern: "script.es5/unittests/*.spec.js", included: true, watched: true }
    ],

    // list of files to exclude
    exclude: [
    ],


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

    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // 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_WARN,


    // 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", "Firefox", "IE"],

    plugins: [
        "karma-systemjs",
        "karma-detect-browsers",
        "karma-firefox-launcher",
        "karma-chrome-launcher",
        "karma-ie-launcher",
        "karma-phantomjs-launcher",
        "karma-jasmine"
    ],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
});
}

The test

describe("Simple test", () => {
    it("should work", () => {
        expect(1).toBe(1);
    });
});

Solution

  • According to your output:

    15 05 2018 16:23:28.400:WARN [watcher]: Pattern "C:/thing/node_modules/systemjs/dist/system-polyfills.js" does not match any file.

    So you have no polyfills from the ENOENT error.

    Then later it has:

    IE 11.0.0 (Windows 10 0.0.0) ERROR { "message": "'Promise' is undefined\nat

    As you probably are aware IE 11 does not support the Promise construct out of the box like on-level browsers do so you'd need to polyfill with something.

    If possible I'd also recommend looking at it with Chrome to see if your tests will run at all. Then you can fight the battle with IE.