Search code examples
gulpjasminekarma-runnerjspmangularjs-1.5

Karma/jasmine testing error: "Uncaught TypeError: Unexpected anonymous System.register call."

I am trying to get basic karma-jasmine test running but I get the following error. 

Chrome 51.0.2704 (Windows 7 0.0.0) ERROR
  Uncaught TypeError: Unexpected anonymous System.register call.
  at D:/git/ui-components/jspm_packages/system.src.js:2891


Chrome 51.0.2704 (Windows 7 0.0.0): Executed 0 of 0 SUCCESS (0 secs / 0 secs)

Test doesn't seem to be running as well.
Folder structure is as following:

  • components
    -[individual components]
    -tests folder with simple test
    -app.js(includes master component which calls all child components)

Application is working fine, but I am running into lot of problems with testing.
Any kind of help is appreciated.

Following is my package.json file

{
  "name": "ui-components",
  "version": "1.0.0",
  "description": "POC",
  "main": "index.js",
  "scripts": {
    "install": "jspm install && typings install",
    "start": "gulp serve"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-typescript": "^2.12.2",
    "gulp-watch": "^4.3.5",
    "jasmine": "^2.4.2",
    "jasmine-core": "^2.4.1",
    "jspm": "^0.16.30",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "file:C:\\Users\\*********\\Downloads\\karma-cli-master",
    "karma-jasmine": "^0.3.6",
    "karma-jspm": "^2.0.2",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  },
  "jspm": {
    "dependencies": {
      "angular": "github:angular/bower-angular@^1.5.0",
      "angular-route": "github:angular/bower-angular-route@^1.5.0",
      "bootstrap": "github:twbs/bootstrap@^3.3.6",
      "css": "github:systemjs/plugin-css@^0.1.20"
    },
    "devDependencies": {}
  }
}

karma.config.js file

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'jspm'],
    files: [
      'components/**/*.js',
      'components/*.js',
      'components/tests/*.spec.js'
    ],
    exclude: [
    ],
    preprocessors: {
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

firstTest.spec.js file 

import angular from 'angular';

describe("Hello World Tests", () => {
    it("First", () => {
        expect("TestString").toEqual("");
    });
});

Index.html file

<html ng-app="app">
    <head>
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script>
        <link rel="stylesheet" href="jspm_packages/github/twbs/[email protected]/css/bootstrap.css" />
        <link rel="stylesheet" href="style.css" />
        <script>
                System.import("components/app.js");
        </script>
    </head>
    <body>
        <main-component></main-component>
    </body>
</html>

app.ts file

import * as angular from 'angular'
import 'components/mainComponent/mainComponent'

angular.module("app", ['mainComponent']);
Solution

  • I figured out that I needed to pass in my .ts files in JSPM array object in karma.config.js file. I couldn't just pass files into following block. 

    files: [
      'components/**/*.js',
      'components/*.js',
      'components/tests/*.spec.js'
]`

    instead this is what it required. 

    jspm: {
  config: "config.js",
  packages: "jspm_packages/",
  loadFiles: ['components/**/*spec.js'],
  serveFiles: ['components/**/*.js']
},

    Hopefully this helps someone else.