为什么我会从 Karma 网络服务器收到 404 消息？

Question

目前，我正在尝试使用带有 ES6 转译器 Babel 和 Karma 的 Node/AngularJs/JSPM 设置一个演示项目。

服务部分正在工作。我需要稍后改进它，但是来自 Angular 的第一个“hello world”正在工作。

我想添加 Karma 来为 Angular 应用程序运行单元测试。但是我收到了jspm_packages 的 404 警告，请参见下面的屏幕截图。

我的测试没有运行，因为它总是会失败。我的测试文件看起来像这样（那里还没有特定角度的部分）：

// HomeController.spec.js
import 'angular-mocks';

describe('Test suite for HomeController', function() {

    it('dummy test', function() {
        expect(true).toBe(true); // will not fail
    });
});

不知道出了什么问题，我尝试了很多事情都没有成功，也许我做错了什么。但这是我在 Karma 配置中尝试过的：

• 尝试了许多不同的路径设置，因为我认为这是路径的问题
• 使用的代理
• Browserify 和 Bablify 以转译源代码
• JSPM 插件加载依赖项进行测试

您可以在 bitbucket. 找到我目前正在处理的代码

我的应用的目录结构如下：

这是 Karma 的截图：

这是我当前的 Karma 配置文件：

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: ['jspm', 'jasmine'],


// list of files / patterns to load in the browser
files: [
  //'client/test-unit/**/*.test.js'
],

jspm: {
  paths: {
    // '*': 'client/app/**/*.js'
  },
  // Edit this to your needs
  // config: 'client/app/jspm.config.js',
  // Edit this to your needs
  loadFiles: ['client/test-unit/**/*.spec.js'],
  serveFiles: ['client/app/**/*.js', 'client/app/**/*.css', 'client/app/**/*.html']
},

proxies:  {
  // '/assets/jspm_packages/': '/client/app/assets/jspm_packages/'
},

plugins:[
  'karma-jasmine',
  'karma-coverage',
  'karma-jspm',
  'karma-chrome-launcher'
],

// 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: {
//  'client/app/**/*.js': ['browserify'],
//  'client/test-unit/**/*.js': ['browserify']
},

/*browserify: {
  debug: true,
  transform: [ 'babelify' ]
},*/
// babelPreprocessor: {
//   options: {
//     sourceMap: 'inline'
//   },
//   filename: function (file) {
//     return file.originalPath.replace(/\.js$/, '.es5.js');
//   },
//   sourceFileName: function (file) {
//     return file.originalPath;
//   }
// },


// 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: ['Chrome'],


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

Answer 1

我想我找到了解决问题的方法。

我必须设置一些代理才能使其正常工作。 此外，将日志级别更改为 logLevel: config.LOG_DEBUG 以调试我的问题也很有帮助，因为这样您将看到问题的更多详细信息。

另一个问题是测试文件在执行之前没有被转译。那是因为转译的预处理器没有正确设置。

并且jspm 对象内部的packages 路径也是必需的。

这仍然很难理解，我不确定是否有更简单的方法。 无论如何，以下 karma.config 对我有用：

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: ['jspm', 'jasmine'],


    // list of files / patterns to load in the browser
    files: [
      //'client/test-unit/**/*.test.js'
    ],

    proxies:  {
      '/base/app/': '/base/client/app/',
      '/base/assets/jspm_packages/': '/base/client/app/assets/jspm_packages/'
    },

    jspm: {
      // Edit this to your needs
      config: 'client/app/jspm.config.js',
      // Edit this to your needs
      loadFiles: ['client/test-unit/**/*.spec.js'],
      serveFiles: ['client/app/**/*.js'],
      packages: "client/app/assets/jspm_packages/"
    },


    plugins:[
      'karma-jasmine',
      'karma-coverage',
      'karma-jspm',
      'karma-chrome-launcher'
    ],

    // 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: {
      'test-unit/**/*.js': ['babel', 'coverage']
    //  'client/app/**/*.js': ['browserify'],
    //  'client/test-unit/**/*.js': ['browserify']
    },

    /*browserify: {
      debug: true,
      transform: [ 'babelify' ]
    },*/
    // babelPreprocessor: {
    //   options: {
    //     sourceMap: 'inline'
    //   },
    //   filename: function (file) {
    //     return file.originalPath.replace(/\.js$/, '.es5.js');
    //   },
    //   sourceFileName: function (file) {
    //     return file.originalPath;
    //   }
    // },


    // 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, //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: ['Chrome'],


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

我的测试文件如下所示：

// HomeController.spec.js

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

describe('Test suite for HomeController', function() {

	// var homeController;

	beforeEach(function() {
		module('myApp');
		
		// inject(function($controller) {
		// 	console.log('inject called', $controller);
		// 	//controller = $controller;	
		// 	homeController = $controller('homeController');
		// });
	});

	it('should say "Hello World"', inject(function($controller) {

			var homeController = $controller('homeController');

			// console.log(homeController, angular.mocks);
			expect(homeController.hello).toEqual('Hello world from ES6 HomeController.'); // will not fail
		})
	);
});