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

Question

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

服务部分正在运行。稍后我需要对其进行改进，但 angular 中的第一个 'hello world' 正在运行。

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

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

// 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
  })
 );
});

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

Why do I get a 404 message from Karma webserver?

angularjs

ecmascript-6

karma-runner

jspm