jasmine tests in karma: Uncaught ReferenceError: require is not defined

Question

Karma can not recognize 'require' statement in JSFileSpec.js file. Running karma.conf.js:

(function() {
    describe("DummyEmitter creation", function(){
        return it("creation", function(){
            var DummyEmitter = require('Util.DummyEmitter');
            var dummy = new DummyEmitter('someName');
            return expect(dummy).toBeDefined();
        });
    });
})();

ReferenceError: require is not defined

Answer 1

I was facing same issue, when trying to use require('module_name') (CommonJS style modules) inside a test case and running it using Karma.

The reason was require function is not available to browser (it is undefined). To provide it to browser we can browserify the test js files before Karma runs test case in browser using karma-browserify.

Install karma-browserify using npm install karma-browserify --save-dev

Update karma.conf.js

 frameworks: ['jasmine', 'browserify'],
 preprocessors: {
    'app/tests/*.js': [ 'browserify' ]
 },
 plugins: [..., 'karma-browserify'],

After these changes browserified file is run in browser by Karma, in which require is defined, and test case runs successfully

Answer 2

You might be using a glob pattern that is picking up stuff inside karma's bin directory. Try to execute your tests by using absolute paths to see if that fixes it.

If so then you know your glob pattern is grabbing stuff you did not want to.

For example change

{pattern: '**/**/*_test.js'},

to

{pattern: 'stuff/dashboard/home-page_test.js'},

see if that fixes your problem.

Answer 3

Karma is a test runner that runs your tests in a browser. Whatever browser you setup doesn't know what the require function is.

To use jasmine with node try jasmine-node. https://github.com/mhevery/jasmine-node

To have karma run jasmine node tests, try (wait for it....) jasmine-node-karma. https://npmjs.org/package/jasmine-node-karma

Here's the jasmine wiki pages where I found the above info. https://github.com/pivotal/jasmine/wiki

Hope this helps.

Answer 4

I've encountered today a similar issue. In my case the solution was quite simple. I am using Babel via Webpack to process .jsx files. Files with the .jsx extension did test successfully, while simple .js files throwed a reference error.

If anyone has a similar or equivalent setup they might be able to share the same solution.

In karma.config.js I had to specify preprocessors for .js files as I did for the .jsx ones. Here's an example:

preprocessors: {
  "app/tests/**/*.test.jsx": ["webpack", "sourcemap"],
  "app/tests/**/*.test.js": ["webpack", "sourcemap"]
},

I better add that in my case Webpack passes the code to Babel to compile so that it can run in the browser. I can copy and paste the entire webpack.config.js and karma.config.js if anyone needs them.

Answer 5

I use webpack for that purpose. I published my configuration on npm to save my time for the future projects. Just run npm install webpack-karma-jasmine, and create config files for webpack and karma as described in docs: https://www.npmjs.com/package/webpack-karma-jasmine

Answer 6

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

      basePath: '',


      frameworks: ['mocha', 'chai'],

      files: [
        'test/*.test.js'
      ],

      exclude: [
      ],

      preprocessors: {
        'test/*.test.js': ['webpack']
      },

      webpack: {
        mode: "none",
        module: {
          rules: [
            { test: /\.js?$/, loader: "babel-loader",  options: { presets: ["env"] }, }
          ]
        }
      },

      reporters: ['progress'],

      port: 9876,

      colors: true,

      logLevel: config.LOG_INFO,

      autoWatch: true,

      browsers: ['Chrome'],

      singleRun: false,

      concurrency: Infinity,

      browserNoActivityTimeout: 100000
    })
  }

use webpack

Answer 7

If someone still couldnt resolve with the above solutions, this is what helped me. yarn add browserify and watchify