下午，我有一个 MEAN 堆栈应用程序，我正在为其开发测试。Angular 代码是使用 ES6 编写的，所以我一直在尝试使用 Babel 作为编译器来配置 Karma 和 SystemJS 来运行我的测试。目前，当我karma start karma.conf.js启动浏览器时，会挂起（因为我无法单击调试或其他任何内容），然后浏览器会因控制台错误而关闭：
Uncaught TypeError: Cannot set property 'mock' of undefined.
在此之前的最后一行是DEBUG [web-server]: serving (cached): ( ... )
我当前的应用程序结构是这样的：
我将所有模块导入到一个文件app.js中，然后将它们注入到我的应用程序模块中：
import HomeController from './components/home/home.js';
import HomeService from './services/homeservice.js';
import HomeDirective from './directives/homedirective.js';
import DifferentController from './components/different/different.js';
// ### Filters
import slugifyFilter from './filters/slugify.js';
var moduleName = 'app';
angular.module(moduleName, ['ngNewRouter', 'ngMock', 'ngAnimate', 'ui.bootstrap', 'slugifyFilter'])
.config(['$componentLoaderProvider', SetTemplatesPath])
.controller('AppController', ['$router', AppController]);
function SetTemplatesPath ($componentLoaderProvider){
$componentLoaderProvider.setTemplateMapping(name => `components/${name}/${name}.html`);
}
function AppController ($router) {
$router.config([
// Component is just a template + controller
// in 'components' folder
{ path: '/', redirectTo: '/home' },
{ path: '/home', component: 'home' },
{ path: '/different/:id', component: 'different' }
]);
}
export default moduleName;
我在我的index.html文件中使用手动 Angular 引导，如下所示：
import { default as AppModule } from './app.js';
angular.bootstrap(document, [ AppModule ]);
try {
$(document.body).attr("ng-app", "app");
} catch(e){};
我将 Karma 和 SystemJS 配置为：
// Karma configuration
// Generated on Tue Jul 07 2015 19:56:15 GMT-0400 (Eastern Daylight Time)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: './',
files : [],
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['systemjs', 'jasmine'],
plugins : ['karma-systemjs', 'karma-jasmine', 'karma-chrome-launcher',
'karma-firefox-launcher', 'karma-ie-launcher' ],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: { "**/*.html": ['ngbootstrapfix'] },
systemjs : {
// Path to SystemJS config file
//configFile : 'public/system.conf.js',
// File patterns for application code, dependencies, and test suites
files : [
'public/bower_components/jquery/dist/jquery.js',
'public/bower_components/angular/angular.js',
'public/bower_components/angular-mocks/angular-mocks.js',
'public/bower_components/angular-animate/angular-animate.js',
'public/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'public/bower_components/angular-new-router/dist/router.es5.js',
'public/bower_components/angular-messages/angular-messages.js',
'public/**/*.js'
],
// SystemJS configuration specifically for tests, added after your config file.
// Good for adding test libraries and mock modules
config: {
baseURL : '/',
// Set path for third-party libraries as modules
paths : {
'jquery': 'public/bower_components/jquery/dist/jquery.js',
'angular-mocks': 'public/bower_components/angular-mocks/angular-mocks.js',
'angular' : 'public/bower_components/angular/angular.js',
'angular-animate' : 'public/bower_components/angular-animate/angular-animate.js',
'ui-bootstrap' : 'public/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'router' : 'public/bower_components/angular-new-router/dist/router.es5.js',
'angular-messages' : 'public/bower_components/angular-messages/angular-messages.js',
'babel': 'node_modules/babel-core/browser.js',
'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js',
'systemjs': 'node_modules/systemjs/dist/system.js',
'system-polyfills': 'node_modules/systemjs/dist/system-polyfills.js'
},
transpiler: 'babel'
},
// Specify the suffix used for test suite file names. Defaults to .test.js, .spec.js, _test.js, and _spec.js
testFileSuffix: '-spec.js'
},
// 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_DEBUG,
// 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: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
});
};
我在这里有一个过滤器，我正在尝试测试：
let moduleName = 'slugifyFilter';
angular.module(moduleName, [])
.filter('slugify', () => {
return (input) => {
input = input || '';
return input.replace(/ /g, '-').toLowerCase();
};
});
export default moduleName;
还有我的测试文件：
import 'angular-mocks';
import '../bootstrap.js';
describe('slugify filter', function() {
beforeEach(function() {
angular.mock.module('app');
});
beforeEach(angular.mock.inject(function(_$filter_) {
var $filter = _$filter_;
}));
it('returns a slug when given a string', function() {
var slugify = $filter('slugify');
expect(slugify('Home Component 3')).toContain('home-component-3');
});
});
然而，每当我尝试运行测试时，我都会收到上述错误。真正困扰我的是浏览器在窗口显示“浏览器正在执行”之前就冻结了。任何帮助将不胜感激，我真的很想为我的代码编写一些单元测试！