为什么我会收到来自 Karma 网络服务器的 404 消息？
AWo*_*olf 5 angularjs ecmascript-6 karma-runner jspm
目前，我正在尝试使用带有 ES6 转译器 Babel 和 Karma 的 Node/AngularJs/JSPM 设置一个演示项目。
服务部分正在工作。我需要稍后改进它，但是来自 angular 的第一个“hello world”正在工作。
我想添加 Karma 来运行 angular 应用程序的单元测试。但是我收到了 404 警告jspm_packages，请参见下面的屏幕截图。
我的测试没有运行，因为它总是会失败。我的测试文件看起来像这样（那里还没有特定角度的部分）：
// 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 插件
我的应用程序的目录结构如下所示：
这是 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
});
};
我想我已经找到了解决我的问题的方法。
我必须设置一些代理才能使其工作。此外，将日志级别更改logLevel: config.LOG_DEBUG为调试我的问题也很有帮助，因为这样您将看到问题的更多详细信息。
另一个问题是测试文件在执行前没有被转换。那是因为用于转译的预处理器没有正确设置。
并且还需要对象packages内部的路径jspm才能使其工作。
这仍然很难理解，我不确定是否有更简单的方法来做到这一点。无论如何，以下 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
})
);
});| 归档时间： |
|
| 查看次数： |
6257 次 |
| 最近记录： |