title: Fixtures won't load in Karma
body: <p>I've been trying numerous things, but I can't seem to get an fixture to load when I run Karma. I've tried using <code>html2js</code> and <code>karma-jasmine-jquery</code>—I'm leaning toward the latter, but I'll be okay with whichever one gets my fixture loaded in the DOM)—but as far as I can tell it's not getting loaded and attached to the DOM when my tests run.</p>
  
  <p>My directory structure is pretty simple:</p>
  
  <pre><code>img/
    ↳ mac.png
    ↳ link.png
    ↳ pocketwatch.png
  js/
    ↳ spriteloader.js
    ↳ spriteloader.spec.js
  karma/
    ↳ imagelist.fix.html
    ↳ karma.conf.js
  Gruntfile.coffee
  index.html
  grunt.config.coffee
  package.json
  </code></pre>
  
  <p>These are the node modules I've got installed:</p>
  
  <pre><code>grunt 0.4.5
  grunt-contrib-jshint 0.10.0
  grunt-contrib-watch 0.6.1
  grunt-karma 0.9.0
  karma 0.12.23
  karma-chrome-launcher 0.1.4
  karma-firefox-launcher 0.1.3
  karma-html2js-preprocessor": "^0.1.0",
  karma-jasmine 0.2.0
  karma-jasmine-jquery 0.1.1
  karma-safari-launcher 0.1.1
  karma-story-reporter 0.2.2
  </code></pre>
  
  <p>And here's my <code>karma.conf.js</code> settings:</p>
  
  <pre><code>basePath: '../',
  
  frameworks: ['jasmine-jquery', 'jasmine'],
  
  files: [
    // Source and spec files
    {
      pattern: 'js/*.js',
      watched: true,
      served: true,
      included: true
    },
    // Fixtures
    {
      pattern: 'karma/*.fix.html',
      watched: false,
      served: true,
      included: false
    }
  ],
  
  exclude: [
  ],
  
  preprocessors: {
  },
  
  reporters: ['story'],
  
  port: 9018,
  
  colors: true,
  
  logLevel: config.LOG_INFO,
  
  autoWatch: true,
  
  browsers: ['Chrome', 'Firefox', 'Safari'],
  
  singleRun: true
  </code></pre>
  
  <p>In my spec, I start off my <code>describe()</code> with a <code>beforeEach()</code> that runs the following two lines:</p>
  
  <pre><code>jasmine.getFixtures().fixturesPath = '../';
  jasmine.getFixtures().load('/karma/imagelist.fix.html');
  </code></pre>
  
  <p>Then the <code>it()</code> functions start. They're testing a function that adds an event listener to some <code>&lt;img&gt;</code> elements using <code>document.getElementById()</code>. That's where the fixture needs to come in, because without it the <code>getElementById()</code> will return <code>null</code>. (Which is the issue I'm hitting.)</p>
  
  <p>I've scoured the web for almost a full day looking for things to try, but I can't seem to get anything out of Karma other than <code>TypeError: document.getElementById(...) is null</code>. I've tried changing my Karama config so that, instead of being empty, <code>preprocessors</code> has  <code>"**/*.html": []</code> in it to disable <code>html2js</code>, but that did nothing. I've tried disabling <code>jasmine-jquery</code> and using <code>html2js</code> instead, but there's barely any documentation on <code>karma-html2js-preprocessor</code>, so I can't even tell if I'm using it right. (Which is why I'm leaning more towards <code>jasmine-jquery</code>.) I just can't figure this one out.</p>
  
  <p><strong>UPDATE (3 OCT)</strong></p>
  
  <p>I found <a href="https://stackoverflow.com/questions/15938580/how-do-you-serve-svg-and-fixtures-with-karma-runner-aka-testacular">this question on Stack Overflow</a> and tried out the answer there, but it didn't work—I still got the same behaviour I've been seeing. My <code>karma.conf.js</code> is unchanged from above, but in my <code>spriteloader.spec.js</code> I changed the Jasmine calls to this:</p>
  
  <pre><code>jasmine.getFixtures().fixturesPath = 'http://localhost:9019/base/karma/';
  jasmine.getFixtures().load('imagelist.fix.html');
  </code></pre>
  
  <p>I also tried this, and got the same result again:</p>
  
  <pre><code>jasmine.getFixtures().fixturesPath = 'http://localhost:9019/base/karma/';
  jasmine.getFixtures().load('http://localhost:9019/base/karma/imagelist.fix.html');
  </code></pre>
  
  <p>I then found <a href="https://github.com/karma-runner/karma/issues/788" rel="nofollow noreferrer">this issue thread on GitHub</a> and changed <code>preprocessors</code> in <code>karma.conf.js</code> to this:</p>
  
  <pre><code>preprocessors: {
      '**/*.html': []
  },
  </code></pre>
  
  <p>And I changed the Jasmine calls in my spec to this:</p>
  
  <pre><code>var fixtures = jasmine.getFixtures();
  fixtures.fixturesPath = 'base/karma/';
  fixtures.load('imagelist.fix.html');
  </code></pre>
  
  <p>This also resulted in the same behaviour: <code>TypeError: document.getElementById(...) is null</code></p>
  
  <p>I also found <a href="https://coderwall.com/p/uvxnmq" rel="nofollow noreferrer">this post</a> and tried the configuration outlined in it—except for the addition of <code>JASMINE</code> and <code>JASMINE_ADAPTER</code> to the <code>files</code> section of <code>karma.conf.js</code>—but am still getting the same behaviour.</p>
  
  <p>Since I have <code>karma-jasmine-jquery</code> installed locally, I pointed to the <code>jasmine-jquery</code> script like this:</p>
  
  <pre><code>'node_modules/karma-jasmine-jquery/lib/jasmine-jquery.js'
  </code></pre>
  
  <p>I even tried ditching the Jasmine calls altogether and going with an AJAX call instead:</p>
  
  <pre><code>$('#fixture').remove();
  $.ajax({
      async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
      dataType: 'html',
      url: '../karma/imagelist.fix.html',
      success: function(data) {
          $('body').append($(data));
      }
  });
  </code></pre>
  
  <p>I still got the same result, though. Not sure what else I can try.</p>
  
  <p><strong>UPDATE (4 OCT)</strong></p>
  
  <p>I found <a href="https://stackoverflow.com/questions/20690005/why-is-karma-refusing-to-serve-my-json-fixture-which-id-like-to-use-in-my-jasm">this question/answer on StackOverflow</a> and tried to set it up with <code>html2js</code> per the solution in there. I removed <code>jasmine-jquery</code> from the <code>frameworks</code> section of my <code>karma.conf.js</code>, and added a <code>plugins</code> section that looks like this:</p>
  
  <pre><code>plugins: [
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-html2js-preprocessor',
      'karma-jasmine',
      'karma-safari-launcher',
      'karma-story-reporter'
  ],
  </code></pre>
  
  <p>I also changed my <code>preprocessors</code> section to look like this:</p>
  
  <pre><code>preprocessors: {
      '**/*.html': ['html2js']
  },
  </code></pre>
  
  <p>And I changed my <code>beforeEach()</code> to the following:</p>
  
  <pre><code>beforeEach(function() {
      var imagelist = __html__['../karma/imagelist.fix.html'];
      document.body.appendChild(imagelist);
  });
  </code></pre>
  
  <p>I'm still seeing the same <code>TypeError: document.getElementById(...) is null</code>, though.</p>