Karma / jasmine测试错误:“未捕获的TypeError:意外的匿名System.register调用。”

时间:2016-06-22 14:17:12

标签: gulp jasmine karma-runner jspm angularjs-1.5

我正在尝试运行基本的karma-jasmine测试,但是我收到以下错误。

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)

测试似乎也没有运行。
文件夹结构如下:

  • 部件
    - [个别组件]
    -tests文件夹,简单测试
    -app.js(包括调用所有子组件的主组件)

应用程序运行正常,但我在测试时遇到了很多问题 感谢任何形式的帮助。

以下是我的package.json文件

{
  "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文件

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文件

import angular from 'angular';

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

Index.html文件

<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/bootstrap@3.3.6/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文件

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

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

1 个答案:

答案 0 :(得分:0)

我发现我需要在karma.config.js文件中的JSPM数组对象中传入我的.ts文件。我不能只将文件传递到下一个块。

files: [
      'components/**/*.js',
      'components/*.js',
      'components/tests/*.spec.js'
]`
而这正是它所需要的。

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

希望这有助于其他人。