We Keep Coding

karma-webpack : Module name has not been loaded yet for context : use require([])

I'm new to Jasmine/Karma unit testing for JavaScript applications. I'm trying to implement it in my current project which is using Angular 1.4.12 and Webpack 1.13.1 for bundling. My folder structure is as follows:
The index.js file inside 'core' is trying to require various other modules which are required for Webpack bundling. The file looks like this:
require('../../bower_components/font-awesome/css/font-awesome.min.css');
require('../../bower_components/bootstrap/dist/css/bootstrap.min.css');
require('./scripts/app');
require('./scripts/index');
require('./views/index');
require('./styles/index');
Now, when I'm trying to run a sample test file which resides at the following location: 'modules/st/scripts/controllers/st.test.js', I get the following error message:
Uncaught Error: Module name
"../../bower_components/font-awesome/css/font-awesome.min.css" has not
been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded at
C:/gitcode/repo/fm-dashboard/node_modules/requirejs/require.js:143
My karma.conf.js file looks like:
var webpack = require('webpack');
var getWebpackConfig = require('./webpack.config.js');
var webpackConfig = getWebpackConfig('test');
webpackConfig.output.path = __dirname+'/_build/test';
webpackConfig.entry = {};
// 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: [
'./node_modules/requirejs/require.js',
'./app/core/index.js',
'./bower_components/angular/angular.js',
'./bower_components/angular-mocks/angular-mocks.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: {
'../app/core/index.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: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity,
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
}
})
}
I was under the impression that including Webpack in the preprocessors object would resolve this require issue but seems like this is not the case.
I tried including 'commonjs' in my preprocessors object and frameworks array as suggested by a few people but it didn't help. Can anyone please let me know how to get rid of this 'require' issue and move ahead with my testing?
Thanks in advance.

Sinon stub error with local storage in karma tests (es6 + jspm)

I am trying to stub setItem and getItem methods of window.localStorage and I am experimenting the issues as it can be seen in the screenshot:
The point is I don't know what happens to the window.localStorage object which seems to be different depending on the property. When the time comes to stub the setItem method, I get
Testing storage services LocalStorage "before each" hook for "should return current name":
TypeError: Attempted to wrap string property setItem as function
at checkWrappedMethod (base/node_modules/sinon/pkg/sinon.js:1355:29)
at Object.wrapMethod (base/node_modules/sinon/pkg/sinon.js:1398:21)
at Object.stub (base/node_modules/sinon/pkg/sinon.js:3465:26)
at Context.eval (client/js/common/services/storage/localstorage.spec.js!transpiled:30:14)
at Object.invoke (base/client/jspm_packages/github/angular/bower-angular#1.5.1/angular.js:4628:19)
at Context.workFn (base/client/jspm_packages/npm/angular-mocks#1.4.8/angular-mocks.js:2441:20)
at window.inject.angular.mock.inject (base/client/jspm_packages/npm/angular-mocks#1.4.8/angular-mocks.js:2413:37)
at Context.eval (client/js/common/services/storage/localstorage.spec.js!transpiled:20:7) Error: Declaration Location
at window.inject.angular.mock.inject (base/client/jspm_packages/npm/angular-mocks#1.4.8/angular-mocks.js:2412:25)
at Context.eval (client/js/common/services/storage/localstorage.spec.js!transpiled:20:7)
I am using jspm as a client package/module manager. So, the karma config file is:
basePath: './',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jspm', 'mocha', 'chai-as-promised', 'chai', 'sinon'],
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// enable / disable colors in the output (reporters and logs)
colors: true,
// list of files / patterns to load in the browser
files: [],
jspm: {
// Edit this to your needs
config: 'jspm.config.js',
packages: 'client/jspm_packages',
loadFiles: [
'client/js/common/services/**/*.spec.js'
],
serveFiles: [
'client/js/**/*.js',
'client/js/**/*.html',
'client/js/**/*.css'
],
paths: {
'github:*': 'base/client/jspm_packages/github/*',
'npm:*': 'base/client/jspm_packages/npm/*',
'js/*': 'base/client/js/*'
},
urlRoot: './'
},
proxies: {
'/client': '/base/client'
},
// list of files to exclude
exclude: [],
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
client: {
captureConsole: true,
mocha: {
bail: false,
// require: 'should'
reporter: 'spec',
ui: 'bdd'
}
}
The only thing I can say is if someone has had the same issue and/or can provide some hint to come up with a solution :-/
Thanks!!!

Jasmine Test returns error "Uncaught ReferenceError: require is not defined"

First of all, I know this question has been asked other times, but it seems to be different.
This is my karma config file:
// Karma configuration
// Generated on Thu Jan 21 2016 09:58:23 GMT-0300 (Argentina Standard Time)
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: [
'src/*.js',
'test/*.js',
'src/*.js',
'tests/*.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_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
})
}
This is my test so far in order to make it work:
require('../src/person.js');
describe('Person ', function(){
it('Should say hi with proposed first name and last name', function() {
var person = new person();
expect(true).toEqual(true);
});
});
When I run karma I'm getting the error saying require is not defined.
How ever, karma-requirejs is installed globally by npm.
I was reading this question that seems to be the same problem:
Jasmine Tests give error "Uncaught ReferenceError: require is not defined"
But after adding
plugins : [
'karma-requirejs',
],
to the karma conf file, I have a lot of other errors, that seems it does not recognize this attibute?
How can I fix the error?

I suggest installing karma-requirejs in your project's root, or where all of your other npm modules live local to the project.

Get Contents of External Text File In Karma-Jasmine Test

I've been at this for the whole day and have made virtually no headway. I have an Javascript interpreter which takes text code and I am trying to test this using Karma-Jasmine tests. Because I don't want to embed code in every single spec, I am trying to load these items in from external text files.
So far I've made the text file a fixture in karma.config.json, but I can't seem to figure out how to actually read this into a Javascript string.
Here's a sample spec:
jasmine.getFixtures().fixturesPath = 'base/codeFiles';
var testCode = loadFixtures("base/codeFiles/correct_1.txt");
console.log(f);
describe("#interpreter_load_test", function() {
it("loads the code correctly", function() {
var INTERPRETER = getInterpreter();
INTERPRETER.initialize();
INTERPRETER.loadCode(testCode);
var codeObj = INTERPRETER.code;
var numLines = codeObj.codeLength;
var loadedCode = codeObj.codeString;
expect(numLines).toBe(16);
expect(loadedCode).toBe(testCode);
});
});
Here's my karma.config.json
// Karma configuration
// Generated on Sat Jun 20 2015 21:46:22 GMT+0000 (UTC)
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'],
// list of files / patterns to load in the browser
files: [
'js/build/production.min.js',
'js/tests/*.js',
{
pattern: 'codeFiles/*.txt',
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: ['PhantomJS', 'Chrome', 'Firefox', 'IE', 'Safari'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
proxies: {
'/codeFiles': 'http://localhost:9876/base/codeFiles',
},
});
};
I'm banging my head against the wall at this point, so any help would be greatly appreciated.

In the end I decided to switch to Mocha and use the fs package, which I probably should have been doing in the first place.

Angularjs basic test case using karma and jasmine, not working

I am new to testing in angular.
There are no errors on running karma here .
expected(true).toBe(true) and expected(false).toBe(true) give the same output as below, i have no idea why.
karma start test/karma.conf.js
INFO [karma]: Karma v0.12.16 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 34.0.1847 (Mac OS X 10.9.2)]: Connected on socket VDytVxMpXMxN0QTPU_kg with id 83112246
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 0 of 0 ERROR (0.022 secs / 0 secs)
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: [
//'app/*/*.js'
'app/bower_components/angular/angular.js',
'app/bower_components/jquery/jquery.js',
'app/bower_components/underscore/underscore-min.js',
'app/bower_components/jquery.cookie/jquery.cookie.js',
'app/bower_components/restangular/dist/restangular.min.js',
'app/bower_components/angular-resource/angular-resource.min.js',
'app/bower_components/angular-route/angular-route.min.js',
'app/bower_components/angular-route-segment/build/angular-route-segment.min.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-sanitize/angular-sanitize.js',
'app/bower_components/angular-scenario/angular-scenario.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/scripts/lib/ui-bootstrap-custom-0.10.0.min.js',
'app/scripts/lib/jquery-ui-1.10.3.custom.js',
'app/scripts/app.js',
'app/scripts/config/*.js',
'app/scripts/controllers/*.js',
'app/scripts/directives/*.js',
'app/scripts/services/*.js',
'app/scripts/filters/*.js',
'test/spec/controllers/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_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
});
};
test/spec/controllers/main.js
'use strict';
describe('Controller: MainCtrl', function () {
it('should attach a list of awesomeThings to the scope', function () {
expect(true).toBe(false);
});
});

Put your karma.conf.js in the apps root directory and then just run karma start.
From the command you're running, it looks like the config file is in the test directory, but you've specified that the spec file is in test/spec/controllers. I'm guessing that's a mistake.