Angularjs Karma网页包Jasmine单元测试不工作
我正在尝试用Karma、Jasmine和AngularJS中的Webpack设置测试。 我的网页工作正常,我可以使用Angularjs Karma网页包Jasmine单元测试不工作,angularjs,karma-jasmine,karma-webpack,Angularjs,Karma Jasmine,Karma Webpack,我正在尝试用Karma、Jasmine和AngularJS中的Webpack设置测试。 我的网页工作正常,我可以使用npm start 一个简单的测试可以很好地工作,但当我尝试添加app.js时,一切都变得很糟糕 我尝试了很多搜索和解决方案。请不要想,我是在遇到死路的那一刻写这个问题的。今天我花了一整天的时间在谷歌上搜索,寻找可能的解决方案 这是我的karma.conf.js文件 // Karma configuration // Generated on Mon Sep 18 2017 09:
npm start
一个简单的测试可以很好地工作,但当我尝试添加app.js时,一切都变得很糟糕
我尝试了很多搜索和解决方案。请不要想,我是在遇到死路的那一刻写这个问题的。今天我花了一整天的时间在谷歌上搜索,寻找可能的解决方案
这是我的karma.conf.js文件
// Karma configuration
// Generated on Mon Sep 18 2017 09:27:36 GMT+1000 (AEST)
var webpackConfig = require('./webpack.config.js');
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
frameworks: ['jasmine'],
// ... normal karma configuration
files: [
'./node_modules/jasmine-core/lib/jasmine-core/jasmine.js',
'./node_modules/angular/angular.js', // angular
'./node_modules/angular-mocks/angular-mocks.js', // loads our modules for tests
// all files for test
'./resources/assets/js/auth/app.js',
'./resources/assets/js/account/invoices/*.spec.js',
],
preprocessors: {
// add webpack as preprocessor
'./resources/assets/js/account/invoices/*.spec.js': ['webpack'],
},
webpack: {
// webpack configuration
webpackConfig
},
webpackMiddleware: {
// webpack-dev-middleware configuration
// i. e.
stats: 'errors-only'
},
// 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: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
我写的测试是
describe('Unit testing Dash', function() {
var $compile,
$rootScope;
// Load the myApp module, which contains the directive
beforeEach(angular.mock.module('app'));
// Store references to $rootScope and $compile
// so they are available to all tests in this describe block
beforeEach(inject(function(_$compile_, _$rootScope_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('Replaces the element with the appropriate content', function() {
// Compile a piece of HTML containing the directive
var element = $compile("<dash-list></dash-list>")($rootScope);
// fire all the watches, so the scope expression {{1 + 1}} will be evaluated
$rootScope.$digest();
// Check that the compiled element contains the templated content
expect(element.html()).toContain("Unpaid");
});
});
我正在使用OSX。从技术上讲,webpack应该为Karma提供编译后的文件。但意外的标记导入意味着文件没有被编译并提供给Karma
请帮忙
我甚至试着用巴贝尔编译,但也没有成功。我转到了webpack,因为我们已经构建了webpack配置,并且项目是使用webpage.config编译的
更新
对于任何一个在这个问题上犹豫不决的人,我使用了费利克斯的选项#1。
我只是把编译过的文件包括在Karma中。它很有魅力
只要文件发生更改,Webpack就会自动编译文件,因此只需添加输出就可以了
我的文件数组如下所示
files: [
'./node_modules/jasmine-core/lib/jasmine-core/jasmine.js',
'./node_modules/angular/angular.js', // angular
'./node_modules/angular-mocks/angular-mocks.js', // loads our modules for tests
'./resources/assets/js/account/stripe.spec.js',
'./node_modules/angular-stripe/index.js',
'./node_modules/angular-stripe-checkout/angular-stripe-checkout.js',
// all files for test
'./public/assets/vendor.bundle.js',
'http://localhost:8080/assets/account.js',
'./resources/assets/js/account/invoices/*.spec.js',
不幸的是,我不得不在第二个选项中使用http,但它工作正常。请注意,在您的karma文件中,您传递到webpack只是为了在规范上运行。因此,您的应用程序未被处理 您有两种选择:
要安装的karma问题:错误 bpack-2.0.3.tgz“}”,2.0.4:{“名称”:“karma网页包”,“版本”:“2.0.4” 为了解决这个错误,下面的命令对它很有用
npm缓存清理--force感谢您的回复。我在我的dash.spec.tst
导入应用程序的顶部添加了这一行,从“../../auth/app”;
错误仍然是相同的Chrome 60.0.3112(Mac OS X 10.12.6)错误Uncaught SyntaxError:在app.js文件中的resources/assets/js/auth/app.js:1处意外导入令牌而不是在Karma配置中加载该文件/resources/assets/js/auth/app.js
,您将需要加载应用程序包本身。或者为app.js在预处理程序中添加另一节处理器仍然不走运。预处理器:{./resources/assets/js/auth/app.js':['webpack'],'./resources/assets/js/account/invoices/*.spec.js':['webpack'],},
你能分享你的网页配置吗?你能详细说明选项1吗。如何实现?手动将你的应用程序网页包添加到karma。我可以试试。
files: [
'./node_modules/jasmine-core/lib/jasmine-core/jasmine.js',
'./node_modules/angular/angular.js', // angular
'./node_modules/angular-mocks/angular-mocks.js', // loads our modules for tests
'./resources/assets/js/account/stripe.spec.js',
'./node_modules/angular-stripe/index.js',
'./node_modules/angular-stripe-checkout/angular-stripe-checkout.js',
// all files for test
'./public/assets/vendor.bundle.js',
'http://localhost:8080/assets/account.js',
'./resources/assets/js/account/invoices/*.spec.js',