angularjs - 使用 Angular、Babel (ES6)、Webpack 和 Mocha 设置 Karma

Question

我正在尝试使用 Angular 在一个项目上设置 Karma。我当前收到的错误是:

错误:[$injector:nomod] 模块“app”不可用!您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 http://errors.angularjs.org/1.4.7/ $injector/nomod?p0=app 在/htdocs/src/javascript/app/controllers/fixedQuoteFormController_test.js:2073

我想要完成的只是初始设置，因为我显然没有测试。它似乎不喜欢我的 Controller 的 module.export 。任何有关如何使此设置正常工作的帮助将不胜感激!

我的 Karma.conf 文件:

// Karma configuration
// Generated on Tue Nov 17 2015 13:05:37 GMT-0600 (CST)

module.exports = function (config) {
  config.set({

// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',

// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha', 'chai'],

plugins: [
  require("karma-webpack"),
  require("karma-mocha"),
  require("karma-phantomjs-launcher"),
  require("karma-chai")
],

// list of files / patterns to load in the browser
files: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'src/javascript/app/**/*_test.js',
  'src/javascript/app/**/**/*_test.js'
],

// list of files to exclude
exclude: [
],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
  // add webpack as preprocessor
  'src/javascript/app/*_test.js': ['webpack'],
  'src/javascript/app/**/*_test.js': ['webpack']
},

webpack: {
  // karma watches the test entry points
  // (you don't need to specify the entry option)
  // webpack watches dependencies
  // webpack configuration
},

webpackMiddleware: {
  // webpack-dev-middleware configuration
  // i. e.
  noInfo: true
},

// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],

// web server port
port: 9876,

// enable / disable colors in the output (reporters and logs)
colors: true,

// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,

// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,

// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],

// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,

// Concurrency level
// how many browser should be started simultanous
concurrency: Infinity,
  })
}

我的测试文件:(只是试图需要 Controller )

const testCont = require('./testCont');

我的 Controller

module.exports = angular.module('app').controller('testCont', testCont);

/* @ngInject */
function testCont() {
    return 1;
}

Answer 1

我有一个我一直在研究的概念证明，它可以作为 Angular+Webpack+ES6+Karma+Mocha+Chai. 的成功工作设置。

也许它会给您一些见解或帮助您解决问题。请随意 fork 并尝试一下，看看该设置是否适合您。我的 Webpack.config.js 和 Karma.conf.js 位于不同的文件中。

它可以作为您一个更清晰的起点。