How to configure Karma to work with requirejs and qunit

Question

I'm trying to piece karma and requirejs together. but find a big issue cannot find any answer. I have a project using requirejs and I'm using qunit as its testing framework. they work fine before karma comes in. After following the Karma requirejs instruction, I got an error and could not find the proper solution. The karma version is 0.12.6

The error is:

Uncaught Error: Mismatched anonymous define () module ....

How can I let them work together?

here is my files structure

projectroot
    |
    |----\src
    |    |
    |    |----\demo
    |    |    |
    |    |    |----hello.js
    |    |
    |    |----\test
    |         |
    |         |----hello_test.js
    |         |----test_main.js      
    |       
    |----karma.conf.js    

my karma.conf.js

// Karma configuration
// Generated on Fri Apr 11 2014 11:43:46 GMT+0800 

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: ['qunit', 'requirejs'],
   //plugins:['karma-qunit','karma-launcher-chrome'], 

    // list of files / patterns to load in the browser
    files: [
      'src/test/test-main.js',
      {pattern: 'src/demo/*.js', included: false},
      {pattern: 'src/test/*.js', include: 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_DEBUGs,


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

my test-main.js

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

var pathToModule = function(path) {
  return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};

Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    allTestFiles.push(pathToModule(file));
  }
});

console.log(allTestFiles);
require.config({
  // Karma serves files under /base, which is the basePath from your config file
  baseUrl: '/base',

  // dynamically load all test files
  deps: allTestFiles,

  // we have to kickoff jasmine, as it is asynchronous
  callback: window.__karma__.start
});

my hello_test.js

define(function(){
  it("is a simple test", function(){
    ok(true, "hope it works");
    });
});

Thank you!

ADD the final error report screen:

You can see my hello_test.js is loaded. I read the docs about #mismatch at requirejs.org. It looks like requirejs cannot handle the module name when it's not loaded through their conventional way.

Necropsy

Is your requirejs run time configuration in hello.js? – Durtschi

No, hello is actually empty file. I don't require or define hello in my test. I just want to make sure they can work someway. just added my hello_test.js – Necropsy

try replacing {pattern: 'src/test/*.js', include: false} with {pattern: 'src/test/*test.js', include: false} – Durtschi

No difference. I update my question with an error screenshot – Necropsy

Someone please explain what include: true||false even does? Is there a location with docs for karma -- its seems the docs on the site (karma-runner.github.io) totally suck on completeness...? – Derive

Answer 1

My Mistake

two mistakes in my files:

1. misspell the included in karma.conf.js
2. in qunit test file.

correct qunit test case should be

define(function(){
    test("is a simple test", function(){
        ok(true, "hope it works");
    });
});

NOT it("is a simple test", function()...

Necropsy

Answer 2

Not sure if with your two changes you got it to work or not, but after spending about six hours fighting this same problem, I'd suggest either:

• Removing your line {pattern: 'src/demo/*.js', included: false},
• or, adding 'src/demo/hello.js' to your exclude: [ ] array.

This was part of what caused many of my headaches.

Resistencia