We Keep Coding

Flow with Jasmine: Assign properties and methods to `this` creates 'Cannot set Property' Error

I am a newbie with "Flow" and I am trying to assign an arbitrary property, e.g. foo, to the keyword this. The purpose of this is to setup my test suite environments cleanly in a beforeEach statement. An example would be something like:
// #flow
describe('test', () => {
beforeEach(() => {
this.foo = 'Hello';
});
it('should bar', () => {
expect(this.foo).toBe('Hello');
});
});
Flow would complain about each this.foo with the following:
Flow: property `foo`. Property not found in global object.
I understand that it's bad practice to inject a property to this, but as mentioned previously, I need to assign to do this (sorry for the pun), to set the state of my tests.
Even though I have this error, I thought my karma test would run fine. When I run my an individual karma test, I would get the following error:
TypeError: Cannot set property 'foo' of undefined
I'm not sure what the problem is. This is my karma configuration setup.
module.exports = function configSettings(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: [
{pattern: 'test/**/*.js', watched: false},
],
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'test/**/*.js': ['webpack', 'sourcemap'],
},
webpack: {
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
plugins: ['transform-flow-strip-types']
},
},
},
],
},
devtool: 'inline-source-map',
},
webpackServer: {
noInfo: true,
},
// test results reporter to use
// possible values: 'dots', 'progress'
// Continuous Integration mode
// 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
logLevel: config.LOG_DEBUG,
// start these browsers
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['ChromeCanary'],
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity,
});
};

Can't find source maps for Karma + Jasmine + TypeScript + Webpack

I'm trying to test (with coverage) my TypeScript application using Karma, Jasmine, and Webpack. With the following, I'm able to successfully run tests, but am unable to generate coverage properly. I'm using karma-remap-coverage (https://github.com/sshev/karma-remap-coverage) and it seems simple enough.
It looks as though something interesting is happening (and I'm getting some kind of coverage report) but with a few tweaks here and there, the numbers change drastically and I can never actually load the sourcemaps.
Here's the basic setup:
I have a src directory that contains 10 .ts files. Only one has a corresponding .spec file at the moment.
The spec file is pretty simple and was just enough to prove that I could run tests:
import ComponentToTest from './componentToTest';
describe('ComponentToTest', () => {
it('should run a test', () => {
expect(1+1).toBe(2);
});
it('should be able to invoke the a method', () => {
spyOn(ComponentToTest, 'foo').and.callThrough();
ComponentToTest.foo('testing foo');
expect(ComponentToTest.foo).toHaveBeenCalled();
});
});
This works like a charm when paired with my tsconfig.json file:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": true,
"lib": ["es6", "dom"],
"experimentalDecorators": true
},
"exclude": [
"node_modules"
]
}
and karma.conf.js file:
module.exports = config => config.set({
frameworks: ['jasmine'],
mime: { 'text/x-typescript': ['ts','tsx'] },
// if I make this a generic './src/**/*.ts' it seems to freeze up
// without throwing any errors or running any tests, but that seems
// like a separate issue...
files: [
'./src/lib/componentToTest.ts',
'./src/lib/componentToTest.spec.ts'
],
preprocessors: {
'./src/**/*.spec.ts': ['webpack'],
'./src/**/*.ts': ['webpack', 'sourcemap', 'coverage']
},
webpack: {
devtool: "source-map",
module: {
rules: [
{
test: /\.ts?$/,
loader: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".ts", ".js"]
}
},
webpackMiddleware: {
quiet: true,
stats: {
colors: true
}
},
// add both "karma-coverage" and "karma-remap-coverage" reporters
reporters: ['progress', 'coverage', 'remap-coverage'],
// save interim raw coverage report in memory
coverageReporter: {
type: 'in-memory'
},
// define where to save final remaped coverage reports
remapCoverageReporter: {
'text-summary': null,
html: './coverage/html',
cobertura: './coverage/cobertura.xml'
},
colors: 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: true
});
And finally, I'm launching the tests with a simple Gulp task:
gulp.task('test', function (done) {
new Server({
configFile: __dirname + '/karma.conf.js',
singleRun: true
}, (exitCode) => {
done();
process.exit(exitCode);
}).start();
});
When run, I get an output that seems (mostly) promising:
Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 1 of 2 SUCCESS (0 secs / 0.002 secs)
Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 2 of 2 SUCCESS (0.026 secs / 0.004 secs)
[Error: Could not find source map for: "app/src/lib/componentToTest.ts"]
[Error: Could not find source map for: "app/src/lib/componentToTest.spec.ts"]
========================= Coverage summary =========================
Statements : 43.69% ( 322/737 )
Branches : 15.7% ( 38/242 )
Functions : 35.47% ( 61/172 )
Lines : 44.91% ( 322/717 )
====================================================================
So something is happening! Which makes me feel like I'm close. When I browse to my coverage report in a browser, I see both the .spec.ts file and the .ts file listed (which is again, getting closer) but I'm not quite there for a couple of reasons:
The .spec.ts file is being included in the coverage report. Since this is the test file, I do not want to include it.
Source maps are not being properly generated - this is clear from the errors in the console and also from the inability to browse to the specific file's coverage report.
I do feel like I'm pretty darn close. Is there anything simple that I'm missing or suggestions?
Update:
I realized I was using an older version of Node and thought that may be causing some issues. I upgraded to 6.11.0 and while that didn't solve anything, it did provide slightly more context:
The errors are being reported by remap-istanbul (no surprise there, really):
CoverageTransformer.addFileCoverage (/app/node_modules/remap-istanbul/lib/CoverageTransformer.js:148:17)
I am using karma-remap-coverage#0.1.4 which uses remap-istanbul#0.8.4 - it seems like there have been issues with remap-istanbul in the past, but not at the version I'm using.
Also using Webpack 2.6.1 and TypeScript 2.3.2

Well, after several days of trying different things, I've finally found a solution that works. I'm not sure specifically what was causing the issue in my first post, but here's where I've ended up. This may be helpful for someone else looking for a really simple TypeScript, Karma, Jasmine, Webpack (with coverage) setup.
My file structure and spec file stayed the same.
My tsconfig.json updated to:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"inlineSourceMap": true, // this line
"sourceMap": false, // and this one
"experimentalDecorators": true,
"lib": ["es6", "dom"]
},
"exclude": [
"node_modules"
]
}
I switched to using the awesome-typescript-loader instead of ts-loader.
And finally, my karma.conf.js file now looks like:
module.exports = config => config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
frameworks: ['jasmine'],
mime: { 'text/x-typescript': ['ts','tsx'] },
files: [
'node_modules/angular/angular.min.js',
'./src/**/*.ts'
],
preprocessors: {
'./src/**/*.ts': ['webpack']
},
webpack: {
devtool: 'inline-source-map',
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
'node_modules',
/\.spec\.ts$/
]
},
{
test: /\.ts?$/,
use: [
{
loader: 'awesome-typescript-loader',
query: {
/**
* Use inline sourcemaps for "karma-remap-coverage" reporter
*/
sourceMap: false,
inlineSourceMap: true,
compilerOptions: {
removeComments: true
}
},
}
]
},
{
enforce: 'post',
test: /\.(js|ts)$/,
loader: 'istanbul-instrumenter-loader',
exclude: [
/node_modules/,
/\.spec\.ts$/
]
},
{ test: /\.html$/, loader: 'html-loader' }
]
},
resolve: {
extensions: [".ts", ".js", ".html"]
},
externals: {
angular: "angular"
}
},
webpackMiddleware: {
quiet: true,
stats: {
colors: true
}
},
// add both "karma-coverage" and "karma-remap-coverage" reporters
reporters: ['progress', 'coverage', 'remap-coverage'],
// save interim raw coverage report in memory
coverageReporter: {
type: 'in-memory'
},
// define where to save final remaped coverage reports
remapCoverageReporter: {
'text-summary': null,
html: './coverage/html',
cobertura: './coverage/cobertura.xml'
},
colors: 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: true
});
Final package versions include:
node 4.2.6 (I was also able to get this to work with a newer version of node, but need to be here for other reasons)
awesome-typescript-loader 3.1.2
istanbul-instrumenter-loader 2.0.0
jasmine-core 2.5.2
karma 1.6.0
karma-chrome-launcher 2.0.0
karma-coverage 1.1.1
karma-jasmine 1.1.0
karma-remap-coverage 0.1.4
karma-webpack 2.0.3
typescript 2.3.2
webpack 2.6.1
Now my tests run, there are no errors in the console, and I have a coverage report of the original TypeScript files!
Lots of credit to the folks who put this together (it ended up guiding quite a bit of my final solution): https://github.com/AngularClass/angular-starter/tree/master/config

Angular 2 testing karma with webpack Can't find variable: Map

I am trying to test my directive with karma and webpack.
This is the karma config file
module.exports = function (config) {
config.set({
basePath: './',
frameworks: ["jasmine"],
files: [
{
pattern: 'directive.spec.ts',
watched: false
}],
exclude: [],
preprocessors: {
'directive.spec.ts': ['webpack', 'sourcemap']
},
webpackServer: {
noInfo: true
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: [
"PhantomJS"
],
singleRun: true,
reporters: ['mocha'],
webpack: {
resolve: {
extensions: ['', '.ts', '.js'],
modulesDirectories: ['node_modules', '.'],
},
module: {
loaders: [{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
}]
},
stats: {
colors: true,
reasons: true
},
debug: true,
devtool: 'inline-source-map'
}
});
};
And the directive.spec.ts:
import { MyDirective } from './directive';
import {TestComponent} from './test';
import {
async,
inject,
TestBed,
} from '#angular/core/testing';
describe('TestComponent', () => {
let fixture: any;
beforeEach(() => {
fixture = TestBed.configureTestingModule({
declarations: [ TestComponent, MyDirective]
})
.createComponent(TestComponent);
fixture.detectChanges();
});
it('should work', () => {
expect(true).toBe(true);
});
But when I am trying to run my test I am getting this error:
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR ReferenceError: Can't find
variable: Map at directive.spec.ts:1380
What am I missing here?

Please follow these steps. It worked for me:
1) Create a "karma-main.js" file with following code
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var appContext = require.context('<Source code root folder>', true, /\.spec\.ts/); // Assuming test case files ends with spec.ts
appContext.keys().forEach(appContext);
var testing = require('#angular/core/testing');
var browser = require('#angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
2) Your karma.conf.js file should look like
var webpackConfig = require('./webpack.config')
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
plugins: [
'karma-jasmine',
'karma-PhantomJS-launcher',
'karma-webpack'
],
webpack: webpackConfig,
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
{ pattern: '<relative path to karma-main.js>', watched: 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: {
'<relative path to karma-main.js>': ['webpack']
},
// 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: ['PhantomJS'],
// 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
})
}

Here is my guess: somewhere in the code you use a class Map which appeared in ES6. But PhantomJS doesn't know about this class yet since it's something too new.
So there are 3 choices:
Get rid of usage of Map and use only current JS features (like Object properties) - the cleanest approach.
Use transpiler for transforming your ES6 code into ES5 that's well understood by modern browser. This has huge disadvantages as it will mess with your line numbers and you may have to sacrifice the possibility to debug some of the code.
Use polyfills that implement ES6 features as functions in external libraries (as Sachin Gaur suggested)

How do I use package aliases in Karma? (Example: $ for jquery)

My code depends on tons of other code, and is loaded last in the browser when running from the normal index.html-file. So of course when dependency 1 is jquery, and dependency 2 uses $.html(), and my code is loaded third, that works just fine in the browser.
But in Karma everything screeches to a halt since I'm loading 'jquery' from bower, not '$'.
To be clear: it's not my code that's creating errors, it's the dependencies. I don't get to test my code since everything errors out before then.
So how do I get the tests to work?
Note: I also run everything through webpack so I can use ES6-code, but webpack is loaded in Karma as well, so that should have no effect.
Chrome 45.0.2454 (Mac OS X 10.11.0) ERROR
Uncaught TypeError: Cannot set property '$' of undefined
at /Users/tom/dev/orm/bower_components/jointjs/dist/joint.js:37
Webpack.conf.js:
var webpack = require('webpack');
module.exports = {
devtool: 'source-map-loader',
externals: [
'jquery',
'joint',
'backbone',
'loadash'
],
// entry: './src/index.js',
// output: {
// path: './public',
// filename: 'designer.js'
// },
plugins: [
new webpack.ProvidePlugin({'$': 'jquery', 'jointjs': 'joint'})
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
};
Karma.conf.js:
// Karma configuration
// Generated on Thu Oct 08 2015 10:54:47 GMT+0200 (CEST)
var webconf = 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 to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: [
'jasmine',
'requirejs',
'bower'
],
// list of files / patterns to load in the browser
files: [
'test-main.js',
{
pattern: 'test/*.js',
included: false
}
],
bowerPackages: [
'jquery',
'jointjs',
'backbone',
'lodash'
],
// 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/*.js': [
'webpack',
'sourcemap'
],
'src/**/*.js': [
'webpack',
'sourcemap'
]
},
webpack: webconf,
// 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: [
'PhantomJS',
'Chrome'
],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};

I think you're either looking for webpack externals
Webpack Externals
{
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery"
}
}
...or, provide plugins.
Provide Plugin vs. Externals
plugins: [
new webpack.ProvidePlugin({
"_": "underscore"
})
]
Most likely provide plugin, because you want to provide that global variable to all the webpacked bundles.

I have no idea what changed, but it now works fine. I include here the final Karma config-file. The webpack-file is identical to the one above.
Note that a couple of configuration changes are actually just normal configuration changes that I've changed since getting it to work.
// Karma configuration
// Generated on Thu Oct 08 2015 10:54:47 GMT+0200 (CEST)
var webconf = 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 to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: [
'requirejs',
'bower',
'jasmine',
],
bowerPackages: [
'jquery',
'lodash',
'backbone',
'jointjs'
],
// list of files / patterns to load in the browser
files: [
'test-main.js',
{
pattern: 'test/*.js',
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/*.js': [
'webpack',
'sourcemap'
],
'src/**/*.js': [
'webpack',
'sourcemap'
]
},
webpack: webconf,
// 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,
client: {
captureConsole: false
},
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: [
'PhantomJS',
'Chrome'
],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};

karma coverage shows 0/0, 100% coverage

My coverage numbers are always showing up as 0/0 and 100%. i found a few links pointing to bug reports and documentation but none helped.
here is my 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'],
// list of files / patterns to load in the browser
files: [
"./CloudConnect.PE.TheApp/Static/CloudConnect.Web.Shared/js/common.js",
"./CloudConnect.PE.Test/node_modules/angular-mocks/angular-mocks.js",
"./CloudConnect.PE.TheApp/Static/CloudConnect.Web.Shared/js/bridge/browser.min.js",
{ pattern: "./CloudConnect.PE.TheApp/Static/CloudConnect.Web.Shared/js/bridge/**/*.js", watched: false, included: false },
{ pattern: "./CloudConnect.PE.TheApp/Static/CloudConnect.Web.Shared/css/**/*.css", watched: false, included: true, served: true },
{ pattern: "./CloudConnect.PE.TheApp/Static/CloudConnect.Web.Shared/images/*.*", watched: false, included: false, served: true },
"./CloudConnect.PE/static/cloudconnect.pe/js/shared.js",
"./CloudConnect.PE.Test/Client/ActWeb/tests/init.spec.js", // always load init.spec.js
"./CloudConnect.PE.ActWeb/static/CloudConnect.PE.ActWeb/js/app.js",
"./CloudConnect.PE.Test/Client/ActWeb/tests/**/*.spec.js"
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
"./CloudConnect.PE.ActWeb/static/cloudconnect.pe.actweb/js/app.js": ["coverage"]
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'],
coverageReporter: {
type: 'html',
dir: './CloudConnect.PE.Test/Client/coverage/ActWeb'
}
});
};
I had to remove some of the config so SO would let me post. Apparently i had to much code in my post with the full config.

Although the paths are not case sensitive by themselves, the files path and the preprocessors path need to match exactly.
I got it working by changing this:
preprocessors: {
"./CloudConnect.PE.ActWeb/static/cloudconnect.pe.actweb/js/app.js": ["coverage"]
}
to this
preprocessors: {
"./CloudConnect.PE.ActWeb/static/CloudConnect.PE.ActWeb/js/app.js": ["coverage"]
}

All the instructions are missing the bit about setting up webpack with istanbul-instrumenter-loader.
{
test: /\.ts/,
include: helpers.root('src', 'app'),
loader: 'istanbul-instrumenter-loader',
enforce: 'post'
}