I'm trying to run Karma with the TeamCity reporter. But when I run the test suite, it fails with:
Error: No provider for "framework:qunit"! (Resolving: framework:qunit)
This works fine when the output is set to 'progress', but not when I add 'teamcity'.
My karma config looks as follows:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['qunit'],
files: [
'scripts/nml/marco/tests/tempTest.js'
],
exclude: [
],
reporters: ['progress', 'teamcity'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['PhantomJS'],
captureTimeout: 60000,
singleRun: true
});
};
My test is still very simple:
(function () {
test('Test one equals one', function () {
equal(1, 1);
});
})();
Any ideas?
I figured out my problem. When I installed the TeamCity reporter, I did it to my current folder instead of the global karma folder. So I think the runner got confused with only a small set of files being in the current folder (and that overrode the global settings).
I was wrong, the tests did not pass any more when just running with the 'progress' reporter.
Related
I have a problem with setting up a test environment for a single page application. I am able to run my tests with headless chrome via karma and mocha but I can´t write tests with ES6 Syntax.
My current start command is
karma start --browsers ChromeHeadless karma.config.js --single-run
my karma.config.js
module.exports = function(config) {
config.set({
frameworks: ['mocha', 'chai'],
files: ['test/**/*spec.js'],
reporters: ['nyan'],
port: 9876, // karma web server port
colors: true,
logLevel: config.LOG_INFO,
browsers: ['ChromeHeadless'],
autoWatch: true,
singleRun: false, // Karma captures browsers, runs the tests and exits
concurrency: Infinity,
})
}
I am able to write normal tests but cant use ES6 Syntax here. When I try to import some react components I get this error:
HeadlessChrome 0.0.0 (Linux 0.0.0)
Uncaught SyntaxError: Unexpected token import
at http://localhost:9876/base/test/components.spec.js?b89d2ba6de494310860a60ad2e9e25aea5eb3657:2
So I have to setup babel somehow to compile my test files first. When I try to use compilers: ['js:babel-core/register'] in my karma config its not gonna work.
I also have seen that compilers seems to be deprecated soon so I also tried require: ['babel-core/register'] but it still won´t compile to use ES6 for my test files.
Any idea how to configurate my karma file to write my tests with ES6 ?
Just in case its important. This is my webpack.config.js
const path = require('path');
const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('dist'),
filename: 'index_bundle.js'
},
module: {
loaders: [
{test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/}
]
},
plugins: [
new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, 'src/sw.js'),
}),
HtmlWebpackPluginConfig
],
devServer: {
hot: false,
inline: false,
historyApiFallback: true
}
};
To make things more clear here is a sample project (it's fully runnable, you can fill out files and play around). Just two things to mention: I used jamsine instead of mocha and real 'Chrome' browser instead of headless. Runnable via npm run test command.
files structure
/
karma.conf.js
package.json
sample.js
sampleTest.js
webpack.test.config.js
karma.conf.js:
// Karma configuration
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: ['jasmine'],
// list of files / patterns to load in the browser
files: ['*Test.js'],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
preprocessors: {
'*Test.js': [ 'webpack'] //preprocess with webpack
},
// test results reporter to use
reporters: ['progress'],
// setting up webpack configuration
webpack: require('./webpack.test.config'),
// 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
browsers: ['Chrome'],
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level how many browser should be started simultaneous
concurrency: Infinity
})
}
package.json (only relevant stuff):
{
"scripts": {
"test": "node_modules/karma/bin/karma start karma.conf.js"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"jasmine-core": "^2.8.0",
"karma": "^2.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.1",
"karma-webpack": "^2.0.9",
"webpack": "^3.10.0"
}
}
sample.js:
export default function(data){
return data;
}
sampleTest.js:
import sample from 'sample';
describe('Sample', function(){
it('is defined', function(){
expect(sample).toBeDefined();
});
it('returns argument', function(){
expect(sample(0)).toBe(0);
})
});
webpack.test.config.js:
module.exports = {
module: {
rules: [
{
test: /tests\/.*\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env']
}
}
}
]
},
resolve: {
modules: ["node_modules", './'],
extensions: [".js"]
}
};
Karma's webpack plugin is used to inform karma that it should prepare files using webpack and specific webpack configuration before sending them to the browser.
Please note key points:
test files pattern in karma.conf.js
pattern to preprocess files (should match the pattern above)
webpack entry in karma.conf.js file
module entry in webpack.test.config.js
p.s. personally I don't use separate patterns for files, I use a separate file (named, say, tests.webpack.js) to have a single place where the way to find test files is defined:
//make sure you have your directory and regex test set correctly
var context = require.context('.', true, /.*Test\.js$/i);
context.keys().forEach(context);
and have in karma.conf.js (paths are irrelevant to sample project above):
files: [
'tests/tests.webpack.js',
],
preprocessors: {
'./tests/tests.webpack.js': [ 'webpack'] //preprocess with webpack
}
You need to convert ESModule in commonjs module with the babel-plugin-transform-es2015-modules-commonjs plugin
In your .babelrc file :
{
"plugins": [
"transform-es2015-modules-commonjs"
]
}
Update :
You can set the plugin in your webpack configuration :
{
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: [require('#babel/plugin-transform-es2015-modules-commonjs')]
}
}
I am using karma with jasmine and the jasmine-spec-tags framework. When starting karma from CLI I use "karma start --tags=MY_TAG" to run only some tests with the tag MY_TAG. This works fine.
Now, I need to start karma programmatically. I tried the following code (note the client.args value at the end):
const server = new Server(
{
autoWatch: true,
browsers: [
'Chrome',
],
files: [
'./node_modules/babel-polyfill/dist/polyfill.js',
'./node_modules/es6-shim/es6-shim.min.js',
'./karma/karma.entry.js'
],
frameworks: ['jasmine', 'jasmine-spec-tags'],
phantomJsLauncher: {
exitOnResourceError: true
},
port: 9876,
preprocessors: {
'./karma/karma.entry.js': ['webpack', 'sourcemap']
},
reporters: ['dots'],
singleRun: false,
webpack: webpackConf,
webpackServer: {
noInfo: true
},
client:
{
args: ['--tags=SchedulingApiService']
}
});
server.start();
This does not work. Am I misunderstanding the client.args value? Would be glad about any help.
To solve this, the client part has to look like this:
client:
{
tags: 'SchedulingApiService'
}
I'm starting a project the NG6-Kit-starter.
I'm using WebStorm.
I want to be able to debug my unit tests using WebStorm, so I followed this tutorial.
I can run unit test from WebStorm but I can't put breakpoints, it never stops at breakpoints and I have don't know why.
I suspect it has to do something with the fact that I'm using a preprocessor in my karma config file.
preprocessors: { 'spec.bundle.js': ['webpack', 'sourcemap'] },
See below my full karma.config.js
module.exports = function (config) {
config.set({
// base path used to resolve all patterns
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha', 'sinon-chai'],
// list of files/patterns to load in the browser
files: [{ pattern: 'spec.bundle.js', watched: false }],
// files to exclude
exclude: [],
plugins: [
require("karma-sinon-chai"),
require("karma-chrome-launcher"),
require("karma-mocha"),
require("karma-mocha-reporter"),
require("karma-sourcemap-loader"),
require("karma-webpack")
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: { 'spec.bundle.js': ['webpack', 'sourcemap'] },
webpack: {
//devtool: 'inline-source-map',
devtool: 'source-map',
module: {
loaders: [
{ test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.(scss|sass)$/, loader: 'style!css!sass' },
{ test: /\.css$/, loader: 'style!css' },
{ test: /\.svg/, loader: 'svg-url-loader' },
{ test: /\.json$/, loader: 'json-loader' }
]
}
},
webpackServer: {
noInfo: true // prevent console spamming when running in Karma!
},
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha'],
// web server port
port: 9876,
// enable colors in the output
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,
// toggle whether to watch files and rerun tests upon incurring changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// if true, Karma runs tests once and exits
singleRun: true
});
};
And my spec.bundle.js file:
import angular from 'angular';
import mocks from 'angular-mocks';
let context = require.context('./client/app', true, /\.spec\.js/);
context.keys().forEach(context);
Does anyone know how to make this work with WebStorm in order to be able to put breakpoints in unit tests ?
Just tried 2017.1 EAP - karma debugging works out of the box:
right-click karma.config.js
debug - breakpoints in client/app/common/hero/hero.spec.js are hit.
In 2016.3.2 I have to refresh the browser page (the one that has JetBrains IDE Extension enabled) to get breakpoints hit.
Thanks for your reply, it helped me find what I was doing wrong. So I tested like you did and it is working exactly as you say (you have to refresh on Webstorm 2016 and it's working out of the box with the EAP version).
SO I went commit by commit (I did 4 commit) to find out what I was doing wrong:
I'm new with webpack and when I was experimenting some stuff I tried changing this setting in karma.conf.js:
Replacing:
webpack: {
devtool: 'inline-source-map',
By:
webpack: {
devtool: 'source-map',
Changing it back solved my issue. The unit tests now stops at breakpoints
I did a bit of research to understand better what this setting is, have a look at this question if you're interested: Why inline source maps?
I am new to angular.js. I am trying to run Karma unit tests for my application but have found a lot of problems as it expects I install all required dependencies like node.js, npm, karma etc.
Now when i goto the my project directory and run this command karma start karma i have this error:
C:\wamp\www\First-angular-App>karma start karma.conf
ERROR [config]: Invalid config file!
SyntaxError: Unexpected string
karma.conf
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
exclude: [ ],
files: [ 'First-angular-App/source/index.html', 'First-angular-App/source/myApp.js' 'First-angular-App/source/myAppCtrl.js' ]
preprocessor
preprocessors: { },
reporters: ['progress'],
port: 9876,
colors: true,
config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
changes
autoWatch: false,
launcher browsers: ['Chrome'],
singleRun: true
});
};
Why its giving me the error invalid config file ?
Probably it should looks like - please take a look for two comments added to configuration.
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
exclude: [ ],
files: [ 'First-angular-App/source/index.html', 'First-angular-App/source/myApp.js', 'First-angular-App/source/myAppCtrl.js' ],
// preprocessor - mark this as comment
preprocessors: { },
reporters: ['progress'],
port: 9876,
colors: true,
// config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - one more comment
logLevel: config.LOG_INFO,
// changes - mark this as comment
autoWatch: false,
// launcher
browsers: ['Chrome'],
singleRun: true
});
};
I really really want to get jasmine-jquery working with jasmine. Not only will it make manipulating the DOM a breeze but it will also provide me with a ton of useful matchers.
However, it gives me this error when I try to start my spec runner:
ReferenceError: Can't find variable: define
at /.../app/vendor/assets/bower_components/jquery/src/jquery.js:37
Any idea what this means? I'm using Karma to run my specs. Here's my unit.js config:
module.exports = function(config) {
config.set({
basePath: '..',
// frameworks to use
frameworks: ['jasmine'],
urlRoot: '/_karma_/',
// list of files / patterns to load in the browser
files: [
'vendor/assets/bower_components/angular/angular.js',
'vendor/assets/bower_components/angular-mocks/angular-mocks.js',
'vendor/assets/bower_components/angular-resource/angular-resource.js',
'vendor/assets/bower_components/angular-cookies/angular-cookies.js',
'vendor/assets/bower_components/angular-sanitize/angular-sanitize.js',
'vendor/assets/bower_components/angular-route/angular-route.js',
'vendor/assets/bower_components/jquery/src/jquery.js', // added this first
'vendor/assets/jasmine-jquery.js', // and then this...
'vendor/assets/bower_components/jasmine-jquery/lib/jasmine-jquery.js',
'app/assets/javascripts/application.js.coffee',
'app/assets/javascripts/**/**',
'spec/javascripts/**/*'
],
// list of files to exclude
exclude: [
],
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['dots'],
// 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,
autoWatch: true,
plugins : [
'jasmine-given',
'requirejs',
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-opera-launcher',
'karma-jasmine',
'karma-ng-scenario',
'karma-phantomjs-launcher',
'karma-coffee-preprocessor'
],
browsers: ['PhantomJS','Chrome','Firefox','Opera'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false,
// Preprocessors
preprocessors: {
'/**/*.coffee':'coffee',
'**/*.slim': ['slim', 'ng-html2js']
}
/*
ngHtml2JsPreprocessor: {
stripPrefix: 'app/assets/templates/',
stripSufix: '.slim'
}
*/
});
All I've done, per the instructions is download jquery, download jasmine-jquery and then require them in Karma's spec file:
files: [
'vendor/assets/bower_components/jquery/src/jquery.js', // added this first
'vendor/assets/jasmine-jquery.js', // and then this...
]
But jquery keeps giving me that undefined is not defined error.
I get no warnings from karma about the paths being wrong.
So how do I get jasmine-jquery working?
Could requirejs have something to do with getting it working?
As mentioned in the response to this question you need to make sure you npm download jasmine-query.
You'll need to change the following in you karma.conf.js:
frameworks: ['jasmine-jquery', 'jasmine']