I have the following simple configuration.
My source code is simple JavaScript. No libraries or modules or anything else.
It appears that there is a specific order for loading things which seems to be tricky even for a simple System-Under-Test.
None of my specs are executing even though Karma starts properly. What could be the problem ?
My test-main.js is this.
var tests = ['bootstrap'];
for (var file in window.__karma__.files) {
if (/spec\.js$/.test(file)) {
tests.push(file);
console.log('[' + file + ']');
}
};
require.config({
// Karma serves files from '/base'
baseUrl: '/base/src',
paths: {
'individual': 'individual',
'demographic': 'demographic',
'tradingpartner': 'tradingpartner',
'enrollmentstate': 'enrollmentstate',
'affiliation': 'affiliation',
'address': 'address',
'provider': 'provider',
'transactionmessage': 'transactionmessage',
'transactionformat': 'transactionformat',
'jquery': '../lib/jquery',
'bootstrap': '../lib/bootstrap',
},
shim: {
'bootstrap':{
deps: ['jquery']
},
'individual':{
deps: ['demographic']
},
'business':{
deps:['demographic']
},
'tradingpartner':{
deps:['enrollmentstate']
},
'tradingpartner':{
deps:['affiliation']
}
},
// ask Require.js to load all the test spec files
//deps: filesToLoad
deps: tests,
// kickoff jasmine tests from karma, once require loading is complete
callback: window.__karma__.start
});
My karma.conf.js is this
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: 'D:/Angular-Demo',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine','requirejs'],
// list of files / patterns to load in the browser
files: [
{pattern: 'lib/**/*.js', included: false},
{pattern: 'src/**/*.js', included: false},
{pattern: 'spec/**/*Spec.js', included: false},
'test/test-main.js',
],
// 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_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,
// required plugins to run unit testing using Karma & jasmin
plugins: [
'karma-jasmine',
'karma-requirejs',
'karma-junit-reporter',
'karma-commonjs',
'karma-coverage',
'karma-ng-html2js-preprocessor',
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-safari-launcher',
'karma-ie-launcher',
'karma-opera-launcher',
'karma-phantomjs-launcher',
'karma-htmlfile-reporter'
]
});
};
Related
Dealing with modules in Jest has been a nightmare.
Aside from all the other issues encountered, there is one I have yet to be able to work through.
It looks as certain imports are getting imported incorrectly.
Consider the following trivial example
import * as jp from 'jsonpath'
console.log('paths: ' + jp.paths)
when running my app code in the browser, this prints
paths: function(obj, string, count) {
assert.ok(obj instanceof Object, "obj needs to be an object");
assert.ok(string, "we need a path");
var results = this.nodes(obj, string, count)
.map(function(r) { return r.path });
return results;
}
when running the same code from a Jest test, I get:
console.log
paths: undefined
upon debugging the test and inspecting the jp object in the debugger, I see:
Needless to say this does not look correct. When running console.log(jp) from the browser, I see
It seems like Jest is screwing up the module prototype somehow.
My jest.config.js:
const esModules = ['quasar/lang', 'lodash-es'].join('|');
/* eslint-env node */
module.exports = {
globals: {
__DEV__: true,
// TODO: Remove if resolved natively https://github.com/vuejs/vue-jest/issues/175
'vue-jest': {
pug: { doctype: 'html' },
},
},
setupFilesAfterEnv: ['<rootDir>/test/jest/jest.setup.ts'],
// noStackTrace: true,
// bail: true,
// cache: false,
// verbose: true,
// watch: true,
collectCoverage: false,
coverageDirectory: '<rootDir>/test/jest/coverage',
collectCoverageFrom: [
'<rootDir>/src/**/*.vue',
'<rootDir>/src/**/*.js',
'<rootDir>/src/**/*.ts',
'<rootDir>/src/**/*.jsx',
'<rootDir>/src/**/*.tsx',
],
coveragePathIgnorePatterns: ['/node_modules/', '.d.ts$'],
coverageThreshold: {
global: {
// branches: 50,
// functions: 50,
// lines: 50,
// statements: 50
},
},
testMatch: [
// Matches tests in any subfolder of 'src' or into 'test/jest/__tests__'
// Matches all files with extension 'js', 'jsx', 'ts' and 'tsx'
'<rootDir>/test/jest/__tests__/**/*.(spec|test).+(ts|js)?(x)',
'<rootDir>/src/**/*.jest.(spec|test).+(ts|js)?(x)',
],
// Extension-less imports of components are resolved to .ts files by TS,
// grating correct type-checking in test files.
// Being 'vue' the first moduleFileExtension option, the very same imports
// will be resolved to .vue files by Jest, if both .vue and .ts files are
// in the same folder.
// This guarantee a great dev experience both for testing and type-checking.
// See https://github.com/vuejs/vue-jest/issues/188#issuecomment-620750728
moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'ts', 'tsx'],
moduleNameMapper: {
'^quasar$': 'quasar/dist/quasar.common.js',
'^~/(.*)$': '<rootDir>/$1',
'^src/(.*)$': '<rootDir>/src/$1',
'^app/(.*)$': '<rootDir>/$1',
'^components/(.*)$': '<rootDir>/src/components/$1',
'^layouts/(.*)$': '<rootDir>/src/layouts/$1',
'^pages/(.*)$': '<rootDir>/src/pages/$1',
'^assets/(.*)$': '<rootDir>/src/assets/$1',
'^boot/(.*)$': '<rootDir>/src/boot/$1',
'.*css$': '#quasar/quasar-app-extension-testing-unit-jest/stub.css',
},
transform: {
// See https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string
[`^(${esModules}).+\\.js$`]: 'babel-jest',
'^.+\\.(ts|js|html)$': 'ts-jest',
// vue-jest uses find-babel-file, which searches by this order:
// (async) .babelrc, .babelrc.js, package.json, babel.config.js
// (sync) .babelrc, .babelrc.js, babel.config.js, package.json
// https://github.com/tleunen/find-babel-config/issues/33
'.*\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
'jest-transform-stub',
},
transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
testEnvironment: 'jsdom'
};
Any suggestions on how to resolve this?
Thank you.
We have an angular app under development. Business code is working and is almost stable. In the app, we have placed JSPs and ts (and generated *.js, *.js.map) files into different folders. Please find project folder structure below:
/angular
--node_modules
--package.json
--
--bills
--a.component.ts
--a.component.spec.ts
--a.component.js
--a.component.spec.js
--a.component.js.map
--a.component.spec.js.map
--pages
--com
--bills
--a.jsp
Karma start prints below error log:
c:\...\angular>.\node_modules\.bin\karma start
24 07 2018 15:33:27.883:ERROR [karma]: { Error: ENOENT: no such file or directory, open 'c:\..\angular\<jsp_path_mentioned_in_component_template_url>'
We cannot have JSPs and ts files in the same folder. We have lot of files and its not feasible to change the project structure now.
Could you help us know where to update karma config to pic JSP from a custom location.
Hope to find some helpful pointers/inputs. Thanks in advance.
Update: Added karma.config.js
karma.config.js:
module.exports = function(config) {
config.set({
basePath: '.',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('karma-generic-preprocessor'),
require('karma-mocha-reporter'),
require('karma-sourcemap-loader')
],
client: {
clearContext: true // leave Jasmine Spec Runner output visible in browser
},
files: [
// System.js for module loading
'node_modules/systemjs/dist/system.src.js',
// Polyfills
'node_modules/core-js/client/shim.min.js',
'node_modules/systemjs/dist/system-polyfills.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/proxy.js',
'node_modules/zone.js/dist/sync-test.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/zone.js/dist/async-test.js',
'node_modules/zone.js/dist/fake-async-test.js',
// RxJs
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Paths loaded via module imports: Angular itself
{ pattern: 'node_modules/#angular/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/#angular/**/*.js.map', included: false, watched: false },
{ pattern: 'systemjs.config.js', included: false, watched: false },
'karma-test-shim.js',
{ pattern: 'payment-pending/payment-pending-select.component.js', included: false, watched: true },
{ pattern: '**/test.component.js', included: false, watched: true },
{ pattern: '**/test.component.spec.js', included: false, watched: true },
],
proxies: {
// required for modules fetched by SystemJS
'/base/resources/js/plugins/angular/': '/base/node_modules/'
},
exclude: [],
preprocessors: { 'test.component.js': ['coverage'], "**/*.component.js": ["generic"], "**/*.js" : ['sourcemap']},
coverageReporter: {
includeAllSources: true,
dir: 'mycoverage/',
reporters: [
{ type: "html", subdir: "html" },
{ type: 'text-summary' }
]
},
reporters: ['mocha','coverage'],
mochaReporter: {
colors: {
success: 'green',
info: 'grey',
warning: 'yellow',
error: 'red'
},
symbols: {
success: '-',
info: '#',
warning: '!',
error: 'x'
}
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
genericPreprocessor: {
rules: [{
process: function (content, file, done, log) {
//Prepare content for parser
file.contents = new Buffer(content);
// Every file has a parser
var parse = require('gulp-inline-ng2-template/parser')(file, { base: "", useRelativePaths: true, templateExtension:'.jsp' });
// Call real parse function
parse(function (err, contents) {
// Callback with content with template and style inline
done(contents);
});
}
}]
},
})
}
Using karma-browserify to do unit tests with Jasmine. The tests correctly run but the coverage reports show file include paths instead of source code. You can reproduce this by installing the following project and run 'gulp unit':
https://github.com/bshack/shackstack
Here is an example of the coverage report contents:
typeof require === "function" && require("/xxx/xxx/xxx/shackstack/app/media/script/service/utilities.js");
Here is my karma.config:
module.exports = function(karma) {
'use strict';
karma.set({
basePath: '',
frameworks: [
'jasmine',
'browserify'
],
files: [{
pattern: 'app/media/script/service/*.js',
included: true
},
{
pattern: 'app/media/test/spec/*Spec.js',
included: true
}],
reporters: [
'progress',
'coverage'
],
preprocessors: {
'app/media/script/service/*.js': [
'browserify',
'coverage'
],
'app/media/test/spec/*Spec.js': [
'browserify'
]
},
browsers: [
//'Chrome',
//'Firefox',
//'Safari',
'PhantomJS'
],
singleRun: false,
autoWatch: false,
// browserify configuration
browserify: {
debug: true,
transform: [
'brfs',
'browserify-shim'
]
},
coverageReporter: {
type: 'html',
dir: 'app/report/istanbul/',
subdir: '.'
},
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000
});
};
any thoughts?
Fixed, basically you don't use karma coverage as you would normally, instead you have to use istanbul as a browserify transform.
var istanbul = require('browserify-istanbul');
module.exports = function(karma) {
'use strict';
karma.set({
basePath: '',
frameworks: [
'jasmine',
'browserify'
],
files: [{
pattern: 'app/media/script/service/*.js'
},
{
pattern: 'app/media/test/spec/*Spec.js'
}],
reporters: [
'progress',
'coverage'
],
preprocessors: {
'app/media/script/service/*.js': [
'browserify'
],
'app/media/test/spec/*Spec.js': [
'browserify'
]
},
browsers: [
//'Chrome',
//'Firefox',
//'Safari',
'PhantomJS'
],
singleRun: false,
autoWatch: false,
browserify: {
debug: true,
transform: [
'brfs',
'browserify-shim',
istanbul({
ignore: ['**/node_modules/**']
})
]
},
coverageReporter: {
type: 'html',
dir: 'app/report/istanbul/',
subdir: '.'
},
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000
});
};
I am attempting to set up Karma/Mocha/Chai into my Backbone project, which uses requirejs and not having much luck.
First, here's my setup:
- app/
- js/
- bower_components/
- node_modules/
- test/
- test-main.js
- karma.conf.js
// relevant bits of karma.conf.js
frameworks: ['mocha', 'requirejs', 'chai'],
files: [
'test/test-main.js',
{pattern: 'bower_components/requirejs-text/text.js', included: false},
{pattern: 'bower_components/jquery/dist/jquery.js', included: false},
{pattern: 'bower_components/underscore/underscore.js', included: false},
{pattern: 'bower_components/backbone/backbone.js', included: false},
{pattern: 'app/js/**/*.js', included: false},
{pattern: 'test/**/*Spec.js', included: falase}
],
exclude: [ 'app/js/requireConfig.js', 'app/js/main.js' ],
preprocessors: { '**/*.html': [] },
// test-main.js
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$\i;
var pathToModules = function(path) {
return path.replace(/^\/base\//, '').replace(/\.js$/, '');
}
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.text(file)) {
allTestFiles.push(pathToModule(file));
}
});
require.config({
baseUrl: '/base/app/js',
paths: {
text: '../../bower_components/requirejs-text/text',
jquery: '../../bower_components/jquery/dist/jquery',
underscore: '../../bower_components/underscore/underscore',
backbone: '../../bower_components/backbone/backbone',
test: '../../test',
},
deps: allTestFiles,
callback: window.__karma__.start;
});
When I run karma, I get:
Error: Mismatched anonymous define() module: function(module) {
--the entire contents of text.js --
I tried changing the order of "frameworks" to frameworks: ['mocha', 'chai', requirejs'], which made the mismatch error go away, but then got:
TypeError: 'undefined' is not an object (evaluating 'window.chai.should')
This is a known issue and the recommendation is to keep requirejs before chai.
Does anyone have experience getting requirejs-text to work? Thanks.
Welp, sorry to waste a question on SO. I started from scratch and my above configuration (aside from needing "{pattern: 'app/js/**/*.html', included: false}") worked fine.
For completeness, here is the updated configuration:
- app/
- js/
- bower_components/
- node_modules/
- test/
- test-main.js
- karma.conf.js
// ---- relevant bits of karma.conf.js ----
// "requirejs" must come before "chai" or Chai will not load properly.
// Sidenote: Karma loads the listed frameworks backwards.
frameworks: ['mocha', 'requirejs', 'chai'],
// Contrary to what a few stackoverflow and github issue responses
// suggested, the order of files do not appear to matter at all.
files: [
'test/test-main.js',
// app files
{pattern: 'app/js/**/*.html', included: false},
{pattern: 'app/js/**/*.js', included: false},
// tests
{pattern: 'test/**/*Spec.js', included: false},
// libraries
{pattern: 'bower_components/jquery/dist/jquery.js', included:false, watching: false},
{pattern: 'bower_components/underscore/underscore.js', included:false, watching: false},
{pattern: 'bower_components/backbone/backbone.js', included:false, watching: false},
{pattern: 'bower_components/requirejs-text/text.js', included:false, watching: false},
],
exclude: [ 'app/js/requireConfig.js', 'app/js/main.js' ],
preprocessors: {},
// ---- test-main.js ----
var allTestFiles = [];
for (var file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
if (/Spec\.js$/.test(file)) {
allTestFiles.push(file);
}
}
}
require.config({
baseUrl: '/base/app/js',
paths: {
jquery: '../../bower_components/jquery/dist/jquery',
underscore: '../../bower_components/underscore/underscore',
backbone: '../../bower_components/backbone/backbone',
text: '../../bower_components/requirejs-text/text',
},
deps: allTestFiles,
callback: window.__karma__.start;
});
I'm using karma 0.10.9 with requirejs, coffeescript, jasmine and jasmine-sprockets (because I'm working on a RoR project, and we have a few files that only contain sprockets directives).
When I start karma, I get that "Executed 0 of 0 ERROR" message.
Looks like on the runner page (localhost:9876) the lib and src files don't get loaded but the specs do. No errors in the console. When I copy the url of a lib or src file directly into the address bar, the file gets loaded.
On the debug page all files (libs, sources and tests) get loaded.
I'm clueless...
Here's my karma.conf.js:
module.exports = function(config) {
config.set({
basePath: '../../..',
frameworks: ['jasmine', 'requirejs'],
files: [
{pattern: 'vendor/assets/javascripts/**/*.js', included: false},
{pattern: 'app/assets/javascripts/v5/**/*.coffee', included: false},
'spec/javascripts/helpers/jasmine-jquery.js',
'spec/javascripts/helpers/maps-helper.js',
{pattern: 'spec/javascripts/fixtures/*.html', watched: true, included: false, served: true},
{pattern: 'spec/javascripts/v5/**/*_spec.coffee', included: false},
'spec/javascripts/v5/test-main.coffee'
],
hostname: [
'localhost'
],
exclude: [
],
preprocessors: {
'**/*.coffee': ['coffee']
},
coffeePreprocessor: {
// transforming the filenames
transformPath: function(path) {
return path.replace(/(.js.coffee|.coffee)/, '.js');
}
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [],
captureTimeout: 20000,
singleRun: false,
reportSlowerThan: 500,
sprocketsPath: 'vendor/assets/javascripts',
sprocketsBundles: [
'bootstrap.js',
'plugins_jquery.js'
],
plugins: [
'karma-jasmine',
'karma-requirejs',
'karma-coffee-preprocessor',
'karma-sprockets'
]
});
};
And the test-main.coffee:
tests = []
for file of window.__karma__.files
tests.push file if /_spec\.js$/.test(file) if window.__karma__.files.hasOwnProperty(file)
# https://github.com/karma-runner/karma-requirejs/issues/6#issuecomment-23037725
for file of window.__karma__.files
window.__karma__.files[file.replace(/^\//, "")] = window.__karma__.files[file]
requirejs.config
baseUrl: 'base/app/assets/javascripts/'
paths:
jquery: '../../../vendor/assets/javascripts/jquery'
underscore: '../../../vendor/assets/javascripts/lodash'
backbone: '../../../vendor/assets/javascripts/backbone'
// etc.pp.
shim:
backbone:
deps: ['jquery', 'underscore', 'json2']
exports: 'Backbone'
json2:
exports: 'JSON'
deps: tests
callback: window.__karma__.start
Any help appreciated.
Thanks!
Your spec should require the file it tests.
In your karma.conf.js the files section should have your src files. once the files are served by karma. then you can require them in your spec.