如何使用 Webpack 和 Karma 对缩小的应用程序运行 AngularJS 单元测试答案

【问题标题】：How to run AngularJS unit tests against the minified app with Webpack and Karma如何使用 Webpack 和 Karma 对缩小的应用程序运行 AngularJS 单元测试
【发布时间】：2017-06-20 20:32:00
【问题描述】：

我正在开发一个 AngularJS 应用程序。我们有一个庞大的现有代码库，我们正在迁移到 Webpack 2 以准备 ng-upgrade。但是我们不知道如何针对缩小的应用运行我们的 Jasmine 单元测试。

我们在this preboot 存储库之后为我们的应用程序建模。

我们在webpack.config.js 中使用它来丑化应用程序：

config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({sourceMap: false})
);

karma.conf.js 基本上是这样的：

module.exports = function karmaConfig (config) {
  config.set({
    frameworks: ['jasmine'],
    files: ['src/tests.webpack.js'],
    preprocessors: {
       'src/tests.webpack.js': ['webpack', 'sourcemap']
    },
    webpack: require('./webpack.config'),
    ...
  });
};

src/tests.webpack.js 看起来像这样：

import 'angular';
import 'angular-mocks/angular-mocks';

const context = require.context('..', true, /\.spec.js$/);
context.keys().forEach(context);

每个.spec.js 文件都使用import 加载实际的Angular 应用程序，然后像这样进行一些注入：

beforeEach(inject(function($rootScope){
    ...
}));

这是我们遇到问题的地方。我们的单元测试正在缩小。 $rootScope 被缩小为 e，注入器无法找到它。我们只想缩小应用程序，而不是测试文件。我们该怎么做？

【问题讨论】：

我不完全确定我是否理解您的问题...However we can't figure out how to run our Jasmine unit tests against the minified app您为什么要针对缩小的应用程序进行测试？ Our unit tests are being minified. $rootScope is minified to e, which the injector fails to find. 您是否使用适当的依赖注入来支持缩小？ We want to minify only the app, not test files. How can we do this? 修改UglifyJsPlugin 设置以排除测试文件。
@BenBeck 感谢您的帮助。 UglifyJsPlugin 只支持排除块，不支持源文件。我们无法弄清楚如何让 Karma 处理多个块。我们正在针对缩小的应用程序进行测试，因为我们想检查是否缺少严格的注入、损坏的构建等。我们在 prod 上运行缩小，所以我们希望测试通过缩小。我们可以在angular.mock.inject() 中使用严格的依赖注入，但我们宁愿完全避免缩小单元测试。
根据文档，UglifyJsPlugin 确实支持Files to exclude from testing 的exclude 选项。也许你可以使用它？如果没有，你能减少你的include 测试吗？ github.com/webpack-contrib/uglifyjs-webpack-plugin
@olore 该文档具有误导性。它对块而不是文件进行操作。见github.com/webpack/webpack/issues/1079。我尝试使用CommonsChunkPlugin 将我们的测试分成块，但我不知道如何让 Karma 加载多个块。

标签： angularjs unit-testing webpack-2 karma-webpack

【解决方案1】：

只要您在测试中有此代码：

beforeEach(inject(function($rootScope){
    ...
}));

缩小会更改变量名称，因此它们可能看起来像：

beforeEach(inject(function($a){
    ...
}));

问题是 angular 在运行时检查 angular 参数，不知道a 是什么！！

解决办法：

beforeEach(inject(['$rootScope', function($rootScope){
    ...
}]));

这样，即使参数名称被破坏，字符串$rootScope 也会给角度提示每个参数所指的内容

【讨论】：