title: Setting up karma, chai, requirejs, chai-jquery
body: <p>I'm close to getting our tests to run with Karma but I'm missing the last step (I think), getting <code>chai-jquery</code> to behave, I've tried two different plugins <a href="https://www.npmjs.com/package/karma-chai-jquery" rel="nofollow">https://www.npmjs.com/package/karma-chai-jquery</a> and <a href="https://www.npmjs.com/package/karma-jquery-chai" rel="nofollow">https://www.npmjs.com/package/karma-jquery-chai</a> with no success, even after following the specified order set in their various github issues or readme files.</p>
  
  <p>This is my <code>tests-main.js</code> file</p>
  
  <pre><code>var allTestFiles = [];
  var TEST_REGEXP = /(spec|test)\.js$/i;
  
  Object.keys(window.__karma__.files).forEach(function(file) {
      if (TEST_REGEXP.test(file)) {
          // Normalize paths to RequireJS module names.
          allTestFiles.push(file);
      }
  });
  
  require.config({
  
      baseUrl: '/base',
  
      paths: {
          'chai':             'node_modules/chai/chai',
          'chai-jquery':      'node_modules/chai-jquery/chai-jquery',
          'jquery':           '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery',
          'underscore':       '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
          'sn/sn-underscore': 'static/scripts/sn/sn-underscore',
          'vendor/jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
      },
  
      deps: allTestFiles,
  
      callback: window.__karma__.start
  });
  </code></pre>
  
  <p>This is my <code>karma.conf.js</code> (removed all non-crucial or default options)</p>
  
  <pre><code>// Karma configuration
  module.exports = function(config) {
      config.set({
          basePath: '',
          // Can't use chai in here for whatever reason
          frameworks: ['mocha', 'requirejs'],
          files: [
              'static/scripts-test/test-main.js',
              {pattern: 'node_modules/chai/chai.js', included: true},
              {pattern: 'static/scripts-test/**/*.js', included: false},
              {pattern: 'static/scripts/sn/**/*.js', included: false}
          ],
          exclude: [
              'static/scripts/global.js'
          ],
          browsers: ['PhantomJS']
      });
  };
  </code></pre>
  
  <p>This is a "working" spec file, it correctly uses gets the references to <code>chai</code> and <code>jquery</code>, but loading <code>chai-jquery</code> fails every time.</p>
  
  <pre><code>define([
      'chai',
      'jquery',
      'static/scripts/sn/widgets/dismissable'
  ], function(chai, $) {
      chai.should();
      chai.expect();
  
      describe('Dismissable', function() {
          var $el = $('&lt;/p&gt;'),
              closeBtnSel = '.js-dismissable-close-btn';
  
          beforeEach(function() {
              $('body').append('&lt;div id="fixtures"&gt;&lt;/div&gt;');
              $el.appendTo('#fixtures').dismissable({closeFn: 'hide'});
          });
  
          afterEach(function() {
              $el.remove();
          });
  
          it('should correctly create the HTML', function() {
              $(closeBtnSel).should.exist;
              $el.should.have.class('dismissable');
          });
      });
  });
  </code></pre>
  
  <p>The error that I get is:</p>
  
  <pre><code>TypeError: 'undefined' is not an object (evaluating '$(closeBtnSel).should.exist')
  </code></pre>
  
  <p>This is my directory structure:</p>
  
  <pre><code>- static/
    - scripts/
    - scripts-test/
      - test-main.js
  - node_modules/
  - karma.conf.js
  </code></pre>
  
  <p>And finally, my <code>package.json</code></p>
  
  <pre><code>{
    "devDependencies": {
      "chai": "^2.3.0",
      "chai-jquery": "^2.0.0",
      "jquery": "^2.1.4",
      "karma-chai": "^0.1.0",
      "karma-mocha": "^0.1.10",
      "karma-requirejs": "*",
      "mocha": "^2.2.5",
      "requirejs": "^2.1.18",
      "should": "^6.0.1"
    }
  }
  </code></pre>
  
  <p>Some of the errors I usually get:</p>
  
  <p>When changing the order of the frameworks in the <code>karma.conf</code></p>
  
  <pre><code>    throw error('No provider for "' + name + '"!');
                  ^
      Error: No provider for "framework:chai"! (Resolving: framework:chai)
  </code></pre>
  
  <p>even after installing the plugin</p>
  
  <p>Sometimes I'll get something like this:</p>
  
  <pre><code>Error: Mismatched anonymous define() module: function ($) {
          return function (chai, utils) {
            return chaiJquery(chai, utils, $);
          };
        }
  </code></pre>
  
  <p>Any help would be greatly appreciated here, I can't wrap my head around this.</p>
  
  <p>EDIT: Small change based on recommendation from Louis</p>