Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Error: No provider for "framework:browserify"! (Resolving: framework:browserify)

Tags:

javascript

angularjs

karma-runner

jasmine

browserify

I have an Angularjs project and I am using karma to run the tests. I am running into some problems with it, getting this error:

ReferenceError: Can't find variable: require
at http://localhost:9876/base/src/test/bower_components/angular-animate/index.js?b8fe1c0a06b723a75c7e596fd8a86d91965f681c:1

Reding into some forums, I was told to use karma browserify, but I am getting this error now:

    28 07 2015 22:41:15.573:WARN [preprocess]: Can not load "browserify", it is not registered!
      Perhaps you are missing some plugin?
    /Users/brunosiqueira/WebstormProjects/copcast-admin/node_modules/karma/node_modules/di/lib/injector.js:9
          throw error('No provider for "' + name + '"!');
                ^
    Error: No provider for "framework:browserify"! (Resolving: framework:browserify)
        at error (/Users/brunosiqueira/WebstormProjects/copcast-admin/node_modules/karma/node_modules/di/lib/injector.js:22:68)
        at Object.parent.get (/Users/brunosiqueira/WebstormProjects/copcast-admin/node_modules/karma/node_modules/di/lib/injector.js:9:13)
        at get (/Users/brunosiqueira/WebstormProjects/copcast-admin/node_modules/karma/node_modules/di/lib/injector.js:54:19)
        at /Users/brunosiqueira/WebstormProjects/copcast-admin/node_modules/karma/lib/server.js:128:20
        at Array.forEach (native)
        at Server._start (/Users/brunosiqueira/WebstormProjects/copcast-admin/node_modules/karma/lib/server.js:127:21)
        at invoke (/Users/brunosiqueira/WebstormProjects/copcast-admin/node_modules/karma/node_modules/di/lib/injector.js:75:15)
        at Server.start (/Users/brunosiqueira/WebstormProjects/copcast-admin/node_modules/karma/lib/server.js:92:18)
        at Function.Server.start (/Users/brunosiqueira/WebstormProjects/copcast-admin/node_modules/karma/lib/server.js:101:10)
        at Object.<anonymous> (/Applications/WebStorm.app/Contents/plugins/js-karma/js_reporter/karma-intellij/lib/intellijServer.js:10:8)
        at Module._compile (module.js:460:26)
        at Object.Module._extensions..js (module.js:478:10)
        at Module.load (module.js:355:32)
        at Function.Module._load (module.js:310:12)
        at Function.Module.runMain (module.js:501:10)
        at startup (node.js:129:16)

Does anybody know what's going on? This is my karma.conf file:

    {
      // Karma configuration
      // Generated on Tue May 19 2015 15:02:17 GMT+0100 (WEST)

      module.exports = function(config) {
        config.set({

          // base path that will be used to resolve all patterns (eg. files, exclude)
          basePath: '',

          plugins: [
            'karma-browserify',
            'karma-phantomjs-launcher',
            'karma-jasmine',
            'karma-ng-html2js-preprocessor',
            'karma-spec-reporter'

          ],

          // testing framework to use (jasmine/mocha/qunit/...)
          frameworks: [  'browserify','jasmine'],

          // list of files / patterns to load in the browser
          files: [
            'http://maps.googleapis.com/maps/api/js?sensor=false&language=en',
            // bower:js
            'bower_components/jquery/dist/jquery.js',
            'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
            'bower_components/bootstrap-select/dist/js/bootstrap-select.js',
            'bower_components/angular/angular.js',
            'bower_components/angular-animate/angular-animate.js',
            'bower_components/angular-cookies/angular-cookies.js',
            'bower_components/angular-touch/angular-touch.js',
            'bower_components/angular-sanitize/angular-sanitize.js',
            'bower_components/angular-resource/angular-resource.js',
            'bower_components/angular-route/angular-route.js',
            'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
            'bower_components/angular-ui-utils/ui-utils.js',
            'bower_components/angular-ui-map/ui-map.js',
            'bower_components/angular-http-auth/src/http-auth-interceptor.js',
            'bower_components/ng-file-upload/ng-file-upload.js',
            'bower_components/ng-file-upload-shim/ng-file-upload-shim.js',
            'bower_components/angular-notify/dist/angular-notify.js',
            'bower_components/moment/moment.js',
            'bower_components/angular-gettext/dist/angular-gettext.js',
            // endbower
            'src/app/**/*.js',
            'src/app/views/**/*.html',
            'src/test/**/*.js'
          ],

          // list of files / patterns to exclude
          exclude: [
          ],

          // preprocess matching files before serving them to the browser
          // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
          preprocessors: {
            '**/*.html': ['ng-html2js'],
            '**/*.js': [ 'browserify' ]
          },
          ngHtml2JsPreprocessor: {
            // strip this from the file path
            stripPrefix: 'src/',
            // prepend this to the


            // setting this option will create only a single module that contains templates
            // from all the files, so you can load them all with module('foo')
            moduleName: 'templatesForTest'
          },

          // test results reporter to use
          // possible values: 'dots', 'progress', 'spec'
          // available reporters: https://npmjs.org/browse/keyword/karma-reporter
          reporters: ['spec'],


          // 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
        });
      };

    }
like image 888
Bruno Siqueira Avatar asked Jul 28 '15 21:07

Bruno Siqueira

2 Answers

I had a similar problem:

Warning: No provider for "framework:mocha"! (Resolving: framework:mocha)

This happened because I didn't include the plugin. Correct config:

...
singleRun: true,
plugins: ['karma-phantomjs-launcher', 'karma-mocha'], // here
frameworks: ['mocha'],
...

Also worth mentioning, you'll need to install the plugin:

npm install karma-mocha --save-dev

https://www.npmjs.com/package/karma-mocha

After further experimentation, looks like this is the error message delivered when you haven't included the plugin for a specified framework:

...
plugins: ['karma-phantomjs-launcher', 'karma-mocha', 'karma-chai'],
frameworks: ['mocha', 'chai'],  // Will require the plugins above
...
like image 144
Ben Avatar answered Nov 03 '22 00:11

Ben

I had a few problems with different versions of the libraries. But in the end, I got to make to work like this:

My package.json file:

"karma": "0.12.0",
"karma-html2js-preprocessor": "0.1.0",
"karma-jade-preprocessor": "0.0.11",
"karma-jasmine": "0.1.5",
"karma-ng-html2js-preprocessor": "0.1.2",
"karma-phantomjs-launcher": "0.1.4",
"karma-requirejs": "0.2.1",
"karma-script-launcher": "0.1.0",
"karma-coffee-preprocessor": "0.2.1",

"brfs": "^1.2.0",
"browserify-shim": "~3.8.0",
"karma-browserify": "^3.0.0",

My karma.conf.js file:

 // Karma configuration
 // Generated on Tue May 19 2015 15:02:17 GMT+0100 (WEST)
module.exports = function(config) {
  config.set({

// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',

// testing framework to use (jasmine/mocha/qunit/...)
frameworks: [ 'jasmine', 'browserify'],

// list of files / patterns to load in the browser
files: [
  'http://maps.googleapis.com/maps/api/js?sensor=false&language=en',
  // bower:js
  'bower_components/jquery/dist/jquery.js',
  'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
  'bower_components/bootstrap-select/dist/js/bootstrap-select.js',
  'bower_components/angular/angular.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/angular-cookies/angular-cookies.js',
  'bower_components/angular-touch/angular-touch.js',
  'bower_components/angular-sanitize/angular-sanitize.js',
  'bower_components/angular-resource/angular-resource.js',
  'bower_components/angular-route/angular-route.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
  'bower_components/angular-ui-utils/ui-utils.js',
  'bower_components/angular-ui-map/ui-map.js',
  'bower_components/angular-http-auth/src/http-auth-interceptor.js',
  'bower_components/ng-file-upload/ng-file-upload.js',
  'bower_components/ng-file-upload-shim/ng-file-upload-shim.js',
  'bower_components/angular-notify/dist/angular-notify.js',
  'bower_components/moment/moment.js',
  'bower_components/angular-gettext/dist/angular-gettext.js',
  // endbower
  'src/app/**/*.js',
  'src/app/views/**/*.html',
  'src/test/**/*.js'
],

// list of files / patterns to exclude
exclude: [
],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
  '**/*.html': ['ng-html2js'],
  'src/**/*.js': ['browserify']
},

browserify: {
  debug: true,
  transform: [ 'brfs' ]
},
ngHtml2JsPreprocessor: {
  // strip this from the file path
  stripPrefix: 'src/',
  // prepend this to the


  // setting this option will create only a single module that contains templates
  // from all the files, so you can load them all with module('foo')
  moduleName: 'templatesForTest'
},

// test results reporter to use
// possible values: 'dots', 'progress', 'spec'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['spec'],


// 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
  });
};

UPDATE

I recently updated all my libraries to the most recent version and I got this error again. I realized that I was missing the library browserify and watchify themselves. So I installed the two missing libraries and everything worked perfectly.

npm install --save-dev karma-browserify browserify watchify
like image 24
Bruno Siqueira Avatar answered Nov 03 '22 01:11

Bruno Siqueira
Sign in to Comment

Related questions

Is it possible to pause a .gif image? [duplicate]
AES 256 on the client side (JS) and in the server (PHP)
Angular $http POST to target="_blank"
Difficulty Manually Walking The Prototype Chain
Updating with mongoose, not returning any errors but neither updating
The best performant way to push items into array?
Manipulate an HTML table (for column reordering, visibility) using jQuery/JavaScript?
Kyle Simpson asyncify function from You Don't Know JS: Async & Performance
Why are numbers with many significant digits handled differently in C# and JavaScript?
jquery draggable moves on 30 degrees only
pubnub, how to identify the sender?
Why does this polymer element's property resolve to undefined?
React self-modifying component with proper state/props
Text starting position Left, Center and Right
Invalidating all $http caches in Angular
Meteor: Why am I losing my data context by switching function() { } to () => { }?
What is an "out of DOM" element?
jquery draggable containment array values for scaled container
Function that returns array of array combinations
Scraping table from website, with javascript:subOpen href link

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!