javascript - Karma + Webpack Angular Controller 未找到

Question

我已经使用 webpack 设置了一个 Angular 项目 with help from this blog post其中有 an associated boilerplate on Github .

应用程序本身工作正常，但当我运行 karma 时，它说找不到它正在尝试测试的 Controller 。

// karma.config.js
module.exports = config => config.set({
  files: ['test.webpack.js'],
  preprocessors: {
    'test.webpack.js': ['webpack', 'sourcemap']
  },
  browsers: ['PhantomJS2'],
  webpack: require('./webpack.config'),
  webpackMiddleware: {
    noInfo: 'errors-only',
  },
});

// test.webpack.js
import 'angular';
import 'angular-mocks/angular-mocks';

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

我现在只有一个 MainCtrl.spec.js 的规范文件。 Karma 将运行它，但我收到错误:

Argument 'MainCtrl' is not a function, got undefined

当我实际运行应用程序时，MainCtrl 似乎加载得很好，所以我不确定为什么 Karma 无法获取它。

我还尝试将 \.spec\.js 更改为 \.js 但这会导致更多错误。

Answer 1

我通过重新思考工作流程来解决这个问题。两个主要问题是 module 无法从 ngMocks 全局导出(与节点导入系统存在冲突)。另一个是测试还必须首先加载所有模块文件，这对于 Karma 来说非常典型。

// karma.config.js
files: ['app/index.js', 'test.webpack.js']
preprocessors: {
  'app/index.js': ['webpack'],
  'test.webpack.js': ['webpack'],
}


// test.config.js
/* Angular is already imported by app/index.js */
import 'angular-mocks/angular-mocks';

/* MUST use `angular.mock.module`. `module` alone won't work */    
beforeEach(angular.mock.module('ngculator'));
const testContext = require.context('.', true, /\.spec\.js$/);
testContext.keys().forEach(testContext);