TypeScript 编译失败和 Karma 测试执行？答案

【问题标题】：TypeScript compilation failure and Karma test execution?TypeScript 编译失败和 Karma 测试执行？
【发布时间】：2016-06-20 19:32:47
【问题描述】：

我目前正在使用 Karma + Jasmine 在我的基于 TypeScript 的项目上运行测试，并且我想在 karma watch 模式下 TypeScript 编译失败时“中断测试”。

我正在使用标准 Karma 配置并使用 webpack 预处理器（编译 TS 文件）编译 TS。一切正常，除了在发生编译错误时看到所有测试都通过是高度误导（即使 webpack 编译失败，karma 也会重新运行以前的测试）。

这似乎是微不足道的，但在查看文档和搜索谷歌一两个小时后，我正在拼命寻找解决方案，但我没有找到。

是否有涉及 karma、jasmine、webpack 和 TypeScript 的解决方案，可以在发生编译错误时中断测试而不破坏 watch 模式？

edit : 添加了手表模式的精度。

【问题讨论】：

如果不看配置文件就很难说出具体的内容，最好是看一些非常简单的孤立项目
事实上，问题不是“我的配置是否正常”，而是“有可能吗？如果有，您是如何在具有类似堆栈的项目中做到这一点的？”。

标签： typescript jasmine karma-runner webpack

【解决方案1】：

就我个人而言，我并没有在单个工作流程中使用 karma 和 webpack。但是请记住，不要对一起使用它们进行一些研究，包括打字稿，并且您可能会遇到https://github.com/webpack/karma-webpack/issues/49 和https://github.com/webpack/webpack/issues/708 的问题。如前所述，bail 选项无法按预期工作，您可以尝试使用提到的插件，该插件会因 TS 错误而失败（引用 this comment to issue #708 的建议）。

更新： 至于watch 的情况，我会考虑进行更改以防止 webpack 失败但同时引发错误并防止业力执行测试（基于此 @ 987654324@)。

module.exports = function (config) {

  config.set({

    browsers: [ 'Chrome' ],
    frameworks: [ 'mocha' ],
    reporters: [ 'mocha' ],

    files: [
      // ...
    ],

    // ...
    webpack: {
      plugins: [
          function()
          {
              this.plugin("done", function(stats)
              {
                  // Log each of the errors
                  stats.compilation.errors.forEach(function (error) {
                      console.log(error.message || error);
                  });

                  // Pretend no assets were generated. This prevents the tests
                  // from running making it clear that there were errors.
                  stats.stats = [{
                      toJson: function () {
                          return this;
                      },
                      assets: []
                  }];                      
              });
          }
      ]
    }
  })

}

我刚刚检查了将上述插件添加到相当简单的项目https://github.com/itajaja/tslib-webpack-starter 并且测试因任何 TS 编译错误而失败。

【讨论】：

一开始看起来还不错，但后来我发现手表模式并没有“干净”地支持...编译错误在发生错误时将其杀死。
您希望在手表模式下有什么行为？我知道的通常方式是所有工作流程（即编译和测试）都需要通过才能启动监视模式。然后在失败的情况下，它应该适当地重新检查，以防有任何新的变化。
就是这样！顶尖！您刚刚发布的代码完美运行：发生编译错误时不会运行任何测试，并且错误会记录在控制台中。我只需要用“if (stats.compilation.errors.length > 0) {”来包装“stats.stats = [{...}]”...
感谢分享。这也适用于 Webpack 2.1.0-beta.25。对于它的价值，我也做了@M'λ' 的建议，以便在没有错误和只有警告的情况下运行测试，因为没有它，如果有警告，监视模式也会停止。

【解决方案2】：

我遇到了tslint 警告的问题。我得到的只是Compilation failed due to tslint errors。在webpack.config.js 中添加此设置即可解决问题：

bail: true,

这与所有常规的webpack.config.js 设置一起使用。例如：

{
    context: __dirname + "/app",
    entry: "./entry",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    bail: true
}

现在我至少在它失败之前看到了第一个 tslint 错误。

【讨论】：