I am getting ReferenceError: Can't find variable: ApplicationConfiguration at application.js on running 'npm test' or 'karma start' in CLI.
My karma.config.js for reference is :
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
files: [
'public/lib/angular/angular.js',
'public/lib/angular-*/angular-*.js',
'public/lib/angular-mocks/angular-mocks.js',
'public/lib/jquery/dist/jquery.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/angular-resource/angular-resource.js',
'public/**/*.js',
'public/modules/core/tests/unit/*.js'
],
exclude: [
],
preprocessors: {
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false
})
}
Please help me....
My issue solved. Had to give proper sequence of files in karma.conf.js instead of putting public/**/*.js as a whole
Proper sequence of files to be added in karma.config.js when ur project is built meanjs yo :
. jquery,angular,angular-mocks,router,config.js,application.js,client.module.js,contoller.js,test.js should be the proper sequence.
Related
I'm trying to run karma tests using karma, webpack and babel. I feel like I've configured properly but it seems that the test files are not being transpiled.
karma.conf:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai'],
files: [
{pattern: 'src/**/*-test.js', watched: false}
],
exclude: [
],
preprocessors: {
'src/**/*-test.js': ['webpack']
},
webpack: require("./webpack.config.js"),
webpackMiddleware: {
stats: 'errors-only'
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
webpack.config:
module.exports = {
entry: [
'react-hot-loader/patch',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/index.js')
],
output: {
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.(js|jsx)$/, exclude: /(\/node_modules\/|test\.js$)/, use: 'babel-loader'},
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=100000' }
]
},
resolve: {
extensions: ['.js', '.jsx']
}
};
My test file uses import syntax to import expect from chai and runs a simple test taht expects true is equal true but when I run the karma I'm getting
uncaught syntaxerror: unexpected token import
I've had a look at similar question:
Karma + Webpack (babel-loader) + ES6 "Unexpected token import"
but no luck. I'm sure it's something simple in my configs. Has anyone seen similar?
this is a new project so using latest packages, webpack2 etc.
Any ideas greatly appreciated
C
I am trying to run a unit test with coverage (using karma-coverage) and webpack (using karma-webpack). The tests run as expected, but to generate a coverage report the actual source file (not the test) needs to be loaded and passed through the coverage and webpack preprocessors.
Unfortunately this fails with the following error:
ERROR [karma]: { [Error: no such file or directory]
code: 'ENOENT',
errno: 34,
message: 'no such file or directory',
path: '/_karma_webpack_/views/Foo/Foo.js' }
Error: no such file or directory
Foo.js is the file that contains the source. Directory structure is like this:
karma.conf.js
- src/
- js/
- views/
- Foo/
- Foo.js
- test/
- FooTest.js
karma.conf.js:
module.exports = function (config) {
config.set({
basePath: 'src/js/',
frameworks: ['jasmine'],
files: [
'**/test/*Test.js',
'**/Foo.js',
],
exclude: [],
preprocessors: {
'**/test/*Test.js': ['webpack'],
'**/Foo.js': ['webpack', 'coverage'],
},
coverageReporter: {
type: 'html',
dir: 'coverage',
},
webpack: {
resolve: {
alias: [
{ _karma_webpack_: 'src/js' },
],
},
},
reporters: ['progress', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_DEBUG,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity,
});
};
The problem is obvious: the path /_karma_webpack_/views/Foo/Foo.js indeed doesn't exist. I guess it's some internal path, but how can I change this?
As you can see I already tried to use the webpack resolve option for this, but it's not working. Since the error message states ERROR [karma] I am also a bit concerned that this error might be something different.
Also, I had the suspicion that maybe the globbing pattern **/Foo.js is off, but trying some changes there (like **/**/Foo.js) also didn't help.
I had this same problem. Turns out, I needed to get out of the karma_webpack folder, so instead of
preprocessors: {
'**/test/*Test.js': ['webpack'],
'**/Foo.js': ['webpack', 'coverage'],
},
try
preprocessors: {
'../**/test/*Test.js': ['webpack'],
'../**/Foo.js': ['webpack', 'coverage'],
},
I'm growing weary of trying to get node libraries to work properly together, but it's part of the job, so here goes.
I have an ES6 application intended for a browser. I have a set of unit tests for my files that I'm bringing up from when my application was written in ES5. I use Browserify to handle importing/exporting modules and bundling my distro. This works fine when running the application in the browser. I can successfully Browserify the source and spec files and run the tests, and the tests pass. I'm very close to getting this working.
The only issue is the coverage. The closest I've come is showing coverage on the karma-browserify generated files, which each look like this:
require('/absolute/path/to/the/corresponding/file.js');
And the coverage obviously shows as 100% for all files, because each one is just one line.
This is my karma.conf.js:
import babelify from 'babelify';
import isparta from 'isparta';
import paths from './paths';
var normalizeBrowserName = (browser) => browser.toLowerCase().split(/[ /-]/)[0];
export default function(config) {
config.set({
basePath: '..',
browsers: ['PhantomJS'],
frameworks: ['browserify', 'jasmine'],
files: paths.test.files,
preprocessors: {
'app/**/*.js': ['browserify', 'sourcemap', 'coverage'],
[paths.test.testFiles]: ['babel'],
},
plugins: [
'karma-babel-preprocessor',
'karma-browserify',
'karma-coverage',
'karma-jasmine',
'karma-junit-reporter',
'karma-phantomjs-launcher',
'karma-sourcemap-loader',
],
autoWatch: false,
colors: false,
loggers: [{ type: 'console' }],
port: 9876,
reporters: ['progress', 'dots', 'junit', 'coverage'],
junitReporter: {
outputFile: paths.test.resultsOut,
suite: '',
},
browserify: {
debug: true,
noParse: paths.js.noparse(),
configure: (bundle) => {
bundle.once('prebundle', () => bundle.transform(babelify.configure({ ignore: 'lib/!**!/!*' })));
},
},
coverageReporter: {
instrumenters: { isparta },
instrumenter: {
[paths.test.cover]: 'isparta',
},
reporters: [
{ type: 'text', },
{ type: 'html', dir: paths.test.coverageOut, subdir: normalizeBrowserName },
{ type: 'cobertura', dir: paths.test.coverageOut, subdir: '.', file: 'coverage.xml' },
],
},
logLevel: config.LOG_DEBUG,
});
};
I really have no idea how any of these libraries work, so I don't know where to start in debugging this. I understand that the ordering of the preprocessors matters, so that Browserify runs on the source files, feeds the resulting link files into the source map generator, then the source map generator feeds the resulting whatever into karma-coverage. But there's some loss of communication between Browserify and whatever handles the coverage. Isparta (which uses istanbul behind the scenes) has no idea that browserify is running, and I don't know what it sees.
If anyone has any experience with testing modularized ES6 WITH proper code coverage, please let me know if I'm on the right track or if I should try something else.
This is the configuration that worked for me, note that I am using browserify-istanbul rather than isparata.
var istanbul = require('browserify-istanbul');
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['browserify', 'mocha'],
files: [
'test/**/*Spec.js'
],
exclude: [
'**/*.sw?'
],
preprocessors: {
'test/**/*Spec.js': ['browserify', 'coverage']
},
browserify: {
debug: true,
transform: [
['babelify', {
ignore: /node_modules/
}],
istanbul({
ignore: ['test/**', '**/node_modules/**']
})
],
extensions: ['.jsx']
},
babelPreprocessor: {
options: {
sourceMap: 'inline'
},
sourceFileName: function(file) {
return file.originalPath;
}
},
coverageReporter: {
dir: 'coverage/',
reporters: [
{ type: 'text-summary' }
]
},
browserNoActivityTimeout: 180000,
reporters: ['coverage', 'progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
it was a massive pain to get working.
hope that helps
HOW TO: Karma + Babel + React + Browserify + Istanbul
I THINK I GOT IT.
If I don't, ping me gus+overflow#mythril.co
Not sure if the previous answer not working has to do with using jasmine instead of mocha but I got it working with these settings.
Required Packages: apart from the obvious (React, Karma, Jasmine, Browserify)
isparta - an Istanbul instrumenter for ES6
browserify-istanbul - a browserify transform
babelify - another browserify transform
babel - JS compiler
babel-preset-2015 - ES6 compile preset
babel-preset-react - React compile preset
Create a .babelrc file in your root dir.
I was very confused as to where to place babel options within the tools, but most (and these) babel tools will look for a .babelrc
{
"presets": ["es2015", "react"],
"sourceMap": "inline"
}
karma.config.js:
const isparta = require('isparta');
const istanbul = require('browserify-istanbul');
module.exports = function (config) {
config.set({
basePath: '',
browsers: ['Firefox', 'Chrome', 'PhantomJS', 'Safari'],
captureConsole: true,
clearContext: true,
colors: true,
files: [
// you need this for Phantom
'node_modules/phantomjs-polyfill/bind-polyfill.js',
// import any third party libs, we bundle them in another gulp task
'./build/libs/vendor-bundle.js',
// glob for spec files
'__PATH_TO_SPEC_FILES_/*.spec.js'
],
frameworks: ['jasmine', 'browserify'],
logLevel: config.LOG_INFO,
preprocessors: {
// I had to NOT include coverage, the browserify transform will handle it
'__PATH_TO_SPEC_FILES_/*.spec.js': 'browserify'
},
port: 9876,
reporters: ['progress', 'coverage'],
browserify: {
// we still use jQuery for some things :(
// I don't think most people will need this configure section
configure: function (bundle) {
bundle.on('prebundle', function () {
bundle.external(['jquery']);
});
},
transform: [
// this will transform your ES6 and/or JSX
['babelify'],
// (I think) returns files readable by the reporters
istanbul({
instrumenter: isparta, // <--module capable of reading babelified code
ignore: ['**/node_modules/**', '**/client-libs/**']
})
],
// our spec files use jsx and so .js will need to be compiled too
extensions: ['.js', '.jsx'],
// paths that we can `require()` from
paths: [
'./node_modules',
'./client-libs',
'./universal'
],
debug: true
},
coverageReporter: {
reporters: [
{ type: 'html', dir: 'coverage/Client' },
{ type: 'text-summary' }
]
}
});
};
With Karma, I think it would look something like this(?):
// Karma configuration
'use strict';
let babelify = require( 'babelify' );
let browserify = require('browserify');
let browserifyBabalIstanbul = require('browserify-babel-istanbul');
let isparta = require('isparta');
browserify: {
debug: true,
transform: [
browserifyBabalIstanbul({
instrumenter: isparta,
instrumenterConfig: { babel: { presets: ["es2015"] } },
ignore: ['**/node_modules/**', '**/unitest/**']
}),
[ babelify, { presets: ["es2015"] } ]
]
},
see the following link : Find a good way to get a coverage report with karma?
Good Morning,
I am having a weird issue that I cannot seem to solve. I have my Karma tests written out and the execute correctly, but when I try to wire up the code coverage for Karma it just spits out 100% no matter what.
I looked at the other questions that were raised here and none of them seemed to solve my issue. Any help would be greatly appreciated.
Using:
"karma": "~0.12.37",
"karma-babel-preprocessor": "^5.2.1",
"karma-browserify": "^4.2.1",
"karma-coverage": "^0.4.2",
"karma-jasmine": "~0.3.5",
"karma-phantomjs-launcher": "^0.2.0",
Here is my karma.conf.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['browserify', 'jasmine'],
files: [
'bower_components/jquery/dist/jquery.js',
'bower_components/angular/angular.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-touch/angular-touch.js',
'bower_components/angular-ui-router/release/angular-ui-router.js'
'src/*.html',
'src/**/*.html',
'src/app/index.js',
'src/app/**/*.js'
],
exclude: [],
preprocessors: {
'src/app/index.js': ['browserify', 'coverage'],
'src/app/**/*.js': ['browserify', 'coverage']
},
browserify: {
debug: true,
transform: ['babelify', 'stringify']
},
reporters: ['progress', 'coverage'],
port: 9876,
colors: true,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false
});
};
My file structure is:
src
app
login
login.controller.js
login.controller.spec.js
login.html
index.js
karma.conf.js
Thank you!
Have you tried using browserify-istanbul transform?
module.exports = function(config) {
config.set({
// ...
browserify: {
transform: ['browserify-istanbul', ...]
}
});
};
You need to "instrument" your code to collect coverage metrics. So you should tell browserify to apply instrumentation before returning the module with require.
I'm under a karma.conf file and I'd like to know if there is a way to disable this output sound bip that comes when I do a 'grunt test' and its contain test errors.
I did a search on Google and I didn't found any related, including Karma's Website.
I think this is can be just a single property too add on my Karma.conf, here we go what I have so far:
module.exports = function (config) {
'use strict';
config.set({
basePath: '../',
logLevel: config.LOG_WARN,
frameworks: ['jasmine'],
files: [
'empty'
],
exclude: [
'empty'
],
singleRun: true,
reportSlowerThan : 500,
autoWatch: true,
browsers: ['PhantomJS'],
reporters: ['dots', 'coverage', 'junit'],
preprocessors: {
// source files, that you wanna generate coverage for
// do not include tests or libraries
// (these files will be instrumented by Istanbul)
'src/targets/**/*.js': ['coverage']
},
junitReporter: {
outputFile: 'reports/coverage/test-results.xml',
suite: 'unit'
},
coverageReporter: {
type: 'html',
dir : 'reports/coverage'
}
});
};
Don't worry for my prop values, it's a dummy one.