I have a problem with setting up units tests in project. When I run tests with IE everything works fine I can see 4/4 tests executed. With chrome i am getting error Empty test suite. Chrome is launched but it looks like it can;t find tests and tests for chrome are not executed.
Karma.config.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-ie-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: ['progress', 'karma-remap-istanbul'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: true
});
};
test.ts is just searching unittests within app folder:
.then(() => require.context('./', true, /\.spec\.ts/))
I found that the issue was with reporters section, after 2 days of agony I changed file to
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
removed mime section and it works!
Related
Prior to upgrading to Angular 11, I ran my unit tests with code coverage via the following command:
ng test --project my-app --code-coverage true
When I upgraded my project to Angular 11, I was still able to do my code coverage tests, but I started getting a message saying "'karma-coverage-istanbul-reporter' usage has been deprecated since version 11". It asked me to install karma-coverage and update karma.conf.js. So I did what it asked. I installed karma-coverage and karma via this command:
npm install karma karma-coverage --save-dev
As a result, I see in my package.json, under devDependencies, the entries for karma:
"karma": "^5.2.3",<br>
"karma-coverage": "^2.0.3"
I updated my karma.conf.js file. The following is what exists, everything was as it was originally except for my comments:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'), // NEWLY ADDED
// ORIGINALLY HERE NOW REMOVED require('karma-coverage-istanbul-reporter'),
require('#angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
reporters: ['progress', 'kjhtml', 'coverage'],
// coverageIstanbulReporter NO LONGER HERE
//coverageIstanbulReporter: {
// dir: require('path').join(__dirname, '../../coverage/my-app'),
// reports: ['html', 'lcovonly', 'text-summary'],
// fixWebpackSourcePaths: true
//},
// coverReporter NEWLY ADDED
coverageReporter: {
dir: 'build/reports/coverage',
reporters: [
{ type: 'html', subdir: 'report-html' },
{ type: 'lcov', subdir: 'report-lcov' }
]
},
// THE FOLLOWING REMAINED AS IS
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
Having made this update, two things are happening and I can't figure out why.
When I run my normal code coverage command, I get the following error: "Server start failed on port 9876: Error: karma-coverage must be installed in order to run code coverage." I did install it, as my package.json indicates, but for some reason my project doesn't recognize this. In addition, if I add back the karma-coverage-istanbul-reporter require method to my conf.js file, coverage works fine, but I still get that deprecation message. Can anyone explain to me why I may be getting this error?
When I run my tests without coverage, I now get multiple warnings that I never got before, like: "Unable to determine file type from the file extension, defaulting to js.
To silence the warning specify a valid type for C:/Angular/my-project/projects/my-app/src/app/app.component.spec.ts in the configuration file." What would I need to do to resolve this?
EDIT: I found the answer. Inside the coverageReporter object, you need to add the fixWebpackSourcePaths property to true:
coverageReporter: {
dir: 'build/reports/coverage',
reporters: [
{ type: 'html', subdir: 'report-html' },
{ type: 'lcov', subdir: 'report-lcov' }
],
fixWebpackSourcePaths: true
},
The trick for me was to remove 'coverage' from the reporters. It should just be:
reporters: ['progress', 'kjhtml'],
The coverage report is then created as expected without weird warnings being thrown.
This seems to be the Angular way, have a look at the karma.conf.js generated by the ng new schematics.
Also, I found that the reporters must have a subdir field:
Doesn't work
reporters: [
{ type: 'html' }
}
Doesn't work
reporters: [
{ type: 'html', subdir: '' }
}
Works:
reporters: [
{ type: 'html', subdir: 'report-html' }
}
I am trying to run my unit tests for Typescript class, but I am getting an error about missing Promise when connected to PhantomJS browser. Below I attach some configuration I am using. What I want to achieve is to write tests in Typescript and use ES6 features like imports and arrow functions.
karma.conf.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['systemjs', 'jasmine'],
plugins: [
'es6-module-loader',
'karma-systemjs',
'karma-jasmine',
"karma-spec-reporter",
"karma-phantomjs-launcher"
],
files: [
'app/test/**/*.spec.ts',
],
systemjs: {
configFile: './karma.system.conf.js',
config: {
baseURL: './'
},
serveFiles: [
]
},
exclude: [],
preprocessors: {},
reporters: ['spec'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: true,
concurrency: Infinity
})
}
karma.system.conf.js
System.config({
paths: {
'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js',
'jasmine': 'node_modules/karma-jasmine/*',
systemjs: 'node_modules/systemjs/dist/system.js',
typescript: 'node_modules/typescript/lib/typescript.js',
'plugin-typescript': 'node_modules/plugin-typescript/lib/plugin.js'
},
meta: {
'*.ts': {
format: 'es6'
}
},
packages: {
'app/': { defaultExtension: 'ts' }
},
transpiler: 'typescript',
});
'karma start' output
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
ReferenceError: Can't find variable: Promise
at node_modules/systemjs/dist/system.js:5
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.042 secs / 0 secs)
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR LOG: 'Error: Not setup properly. window.Promise is undefined'
Do anyone has an idea what is wrong with that setup?
So, I think I have managed to solve my problem by myself at the end. Configuration which worked for me is:
karma.conf.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['systemjs', 'jasmine'],
plugins: [
'karma-systemjs',
'es6-module-loader',
'karma-jasmine',
"karma-spec-reporter",
"karma-phantomjs-launcher"
],
files: [
{pattern: 'app/**/*.ts', included: false, watched: true},
{pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: true},
'app/test/**/*.spec.ts',
],
systemjs: {
configFile: './karma.system.conf.js',
config: {
baseURL: ''
},
serveFiles: [
]
},
exclude: [],
preprocessors: {},
reporters: ['spec'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: true,
concurrency: Infinity
})
}
karma.system.conf.js
System.config({
paths: {
'systemjs': 'node_modules/systemjs/dist/system.js',
'system-polyfills': 'node_modules/systemjs/dist/system-polyfills.js',
'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js',
'jasmine': 'node_modules/karma-jasmine/*',
typescript: 'node_modules/typescript/lib/typescript.js',
'plugin-typescript': 'node_modules/plugin-typescript/lib/plugin.js',
'phantomjs-polyfill': 'node_modules/phantomjs-polyfill/bind-polyfill.js'
},
map: {
'systemjs': 'node_modules/systemjs/dist/system.js',
'system-polyfills': 'node_modules/systemjs/dist/system-polyfills.js',
'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js'
},
meta: {
'*.ts': {
format: 'es6'
}
},
packages: {
'app/': { defaultExtension: 'ts' }
},
transpiler: 'typescript',
});
Of course it was necessary to install used packages with npm install. What is essential, you have to use systemjs at version 0.19.24 for some reason. Leaving it here for anyone who will face the same problem in future.
i am trying to use loadFixtures() on my test [jasmine] with karma but it's not working. i am using ' test/fixtures ' as my fixtures dir
i am trying to get 'html' files to load as fixture
i am using typescript
my jasmine unit
beforeEach(()=>{
jasmine.getFixtures().fixturesPath = 'fixtures';
loadFixtures('test.html');
})
and the packages are
"devDependencies": {
"gulp": "^3.9.1",
"gulp-typescript": "^2.13.6",
"jasmine": "^2.4.1",
"jasmine-jquery": "^2.1.1",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-fixture": "^0.2.6",
"karma-html2js-preprocessor": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-jasmine-jquery": "^0.1.1",
"merge2": "^1.0.2"
}
now come to karma config file
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-jquery',
'jasmine',
'fixture'
],
// list of files / patterns to load in the browser
files: [
'bower_components/jquery/dist/jquery.js',
'./bin/test/**/*.js',
'./dest/**/*.js',
{
pattern: './test/fixtures/*.html',
watched: true,
served: true,
included: false
}
],
// 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 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,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
I wonder if I am missing something trivial here, but I can not see any test reports if I have set up singlerun to true in karma config. It only shows that the browsers were launched and that is it. I can click on DEBUG and inspect the browser console log that way, but I would feel that one should be also see the results in the terminal too.
Thanks for the help!
My karma.config.js:
basePath: '../',
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
frameworks: ['mocha', 'chai'],
files: [
{ pattern: 'test/vendor/indexeddbshim.min.js', watched: false },
{ pattern: 'tests.webpack.js', watched: false },
],
preprocessors: {
'tests.webpack.js': ['webpack'],
},
webpack: {
resolve: {
root: [
path.resolve('./test/vendor'),
],
alias: {
backbone: 'backbone',
underscore: 'underscore',
},
},
module: {
loaders: [
{
// test: /^\.js$/,
exclude: /(node_modules|bower_components|vendor)/,
loader: 'babel-loader',
},
],
},
},
webpackServer: {
noInfo: true,
},
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// 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,
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
plugins: [
require('karma-webpack'),
require('karma-mocha'),
require('karma-chai'),
require('karma-phantomjs-launcher'),
require('karma-chrome-launcher'),
],
logLevel: config.LOG_INFO, });
From the comment above:
Setting singleRun: false assumes that you are explicitly start the karma-client manually.
This means that you start karma (technically the karma-server), then go to another terminal and type karma run.
Setting singleRun: true in your karma configuration will call karma run for you.
Here's the doc:
Karma configuration - requirejs version
I've started working with React and Redux and I'd like to write tests for it using Karma with Mocha and PhantomJS2. I'm using the sources here as base: https://github.com/reactjs/redux/tree/master/examples/counter . I basically want to run the tests there in Karma using Phantom instead of using node and the "npm test".
I've set up and installed the required packages for karma:
package.json
"scripts": {
"test:karma": "karma start",
},
"karma": "^0.13.21",
"karma-babel-preprocessor": "^6.0.1",
"karma-mocha": "^0.2.2",
"karma-phantomjs2-launcher": "^0.5.0",
"phantomjs2": "^2.2.0",
And I've tried to figure out how to build my karma.config.js but I don't seem to get my tests to run and this is where I need the help.
karma.config.js
module.exports = function(config) {
process.env.PHANTOMJS_BIN = './node_modules/phantomjs2/lib/phantom/bin';
config.set({
basePath: './',
frameworks: ['mocha'],
plugins: [ 'karma-mocha', 'karma-phantomjs2-launcher', 'karma-babel-preprocessor' ],
files: [
"components/Counter.js",
"test/components/Counter.spec.js"
],
preprocessors: {
"components/Counter.js": ["babel"],
"test/components/Counter.spec.js": ["babel"]
},
babelPreprocessor: {
options: {
"presets": ["es2015", "react"],
}
},
reporters: ['progress'],
browsers: ['PhantomJS2'],
port: 9099,
runnerPort: 9100,
urlRoot: '/',
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
singleRun: false,
concurrency: Infinity
})
}
For react-boilerplate, we have that exact setup – take a look at our karma.conf.js and the PR that implemented Karma and let me know if that helps!