javascript - jspm + karma + karma-jspm + 插件 typescript

标签 javascript typescript karma-runner jspm systemjs

这篇文章是 stackoverflow 转贴 self 的问题 https://github.com/frankwallis/plugin-typescript/issues/64https://github.com/Workiva/karma-jspm/issues/112

我们计划升级我们的团队 Web UI 堆栈,因此我们决定:

1) 使用 Karma 作为测试启动器,使用 jasmine 作为框架(之前使用 mocha 和自定义运行器)

2)使用TypeScript作为带有UMD或系统模块输出的源代码(之前是纯Javascript)

3) 使用 SystemJS 作为模块加载器,以允许使用不同的模块类型(CommonJS、AMD、system、ES6)而不会过热(之前的 RequireJS)

另外:

1) 我们希望直接从 typescript 代码运行测试,无需预编译并将 JS 存储在磁盘上

2)我们希望测试环境布局非常接近生产布局

3) 我们已经设置了 karma + jasmine + karma-typescript-preprocessor 并且效果很好。但是我们希望不要使用 JSPM/SystemJS 加载器,而在这种情况下,我们将确保我们的测试环境与使用 SystemJS 加载器的生产环境相匹配。因为另一方面,我们需要编写一些自定义 Bootstrap ,仅用于测试。

但是我们在 karma + jspm + typescript-plugin (jspm) 方面遇到了问题。

在 JSPM './config.js' 中

    System.config({
      baseURL: "/", 
      "transpiler": false,
  "packages": {
    "src": {
        "main": "test.ts",
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "ts"
        },
        "*.js": {
          "loader": "ts"
        }
      }
    }
  },
  paths: {
    "npm:*": "jspm/npm/*",
    "github:*": "jspm/github/*"
  },

  map: {
    "ts": "github:frankwallis/plugin-typescript@2.2.3",
    "typescript": "npm:typescript@1.6.2",
    "github:frankwallis/plugin-typescript@2.2.3": {
      "typescript": "npm:typescript@1.6.2"
    }
  }
});

在 Karma 配置中:

// Karma configuration
// Generated on Mon Nov 30 2015 02:58:44 GMT+0500 (RTZ 4 (зима))

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jspm','jasmine'],
    plugins:[
        "karma-jspm",
        'karma-jasmine',
        'karma-chrome-launcher'
        ],
    jspm: {
        loadFiles: ['src/test.ts'], //we just try to check one simple test
        packages: "jspm/"
    }   ,
    proxies : { // avoid Karma's ./base virtual directory
        '/src/': '/base/src/',
        '/jspm/': '/base/jspm/'
    },
    reporters: ['progress'],
    port: 9876,
    browsers: ['Chrome']
  })
}

但是出了问题:

30 11 2015 14:53:34.564:WARN [web-server]: 404: /jspm/github/frankwallis/pl
ugin-typescript@2.2.3
Chrome 46.0.2490 (Windows 10 0.0.0) ERROR: 'Potentially unhandled rejection [6]
Error: XHR error (404 Not Found) loading http://localhost:9876/jspm/github/frank
wallis/plugin-typescript@2.2.3
    at error (http://localhost:9876/base/jspm/system.src.js?6536115be64e0ff966e0
5546f7767676fa7c03d6:1020:16)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:9876/base/jspm/sy
stem.src.js?6536115be64e0ff966e05546f7767676fa7c03d6:1028:13)'

我们检查了 url 是否有效:例如 Karma 很好地服务了 /jspm/github/frankwallis/plugin-typescript@2.2.3\utils.js。 我不明白为什么它尝试加载整个 typescript 插件目录。

所以我们有问题:

1)这是一个错误还是我们理解/配置失败

2)如果这是我们的失败 - 如何解决?

3)我们可能选择了不正确的 Karma + JSPM + Typescript 测试方式?

任何建议都会有帮助。

最佳答案

我们自己发现了错误:"defaultJSExtensions": true, 不在 .\config.js

关于javascript - jspm + karma + karma-jspm + 插件 typescript ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33996104/

相关文章:

typescript :至少需要一个参数时使用扩展运算符

javascript - 在 Angular karma 测试中模拟 Stripe

Angular2 测试 : 'Unhandled Promise rejection:' , 'Failed to load strategyTables.html'

javascript - 按值从数组中删除对象

typescript - 将TypeScript编译成outDir时外部组件模板或css的路径

javascript - Angular 变化 MatInput Size

javascript - 在 karma 预处理器中将文件添加到监视列表

javascript - 上传前预览图片

javascript - 如何检查我的对象是否存在于 javascript map 中?

javascript - vue v2 类属性内对象内的值已更改,但未更改