Karma is ignoring mime setting and tests fail in Chrome

Question

I am getting the following error when trying to run my unit tests.

Refused to execute script from 'http://localhost:9876/base/tests/test.ts' because its MIME type ('video/mp2t') is not executable.

The problem is that karma is serving test.ts with Content-Type:video/mp2t and Chrome v55+ refuses to execute the script.

I am setting the mime property in karma.conf.js as so:

mime: {
  'text/x-typescript': ['ts', 'tsx'],
  'text/losingmyf@#kingmime': ['js']
}

Neither mime type is used by Karma when the tests run. Is there anything that might be changing the mime settings after it's set here?

karma.conf.js

module.exports = function (config) {
  const webpackConfig = require("./webpack.config")({ mode: 'test' });

  var appBase = 'app/';
  var appAssets = '/base/app/'; // component assets fetched by Angular's compiler

  const configuration = {
      basePath: '',
      frameworks: ["jasmine"],
      files: [
          { pattern: './dist-test/pretest.bundle.js', watched: false, served: true },
          { pattern: './tests/test.ts', watched: false },
          { pattern: appBase + '**/*.png', included: false, watched: false }
      ],
      preprocessors: {
          './tests/test.ts': ['webpack', 'sourcemap']
      },
      mime: {
          'text/x-typescript': ['ts', 'tsx'],
          'text/losingmyf@#kingmime': ['js']
      },

      // Proxied base paths for loading assets
      proxies: {
          // required for component assets fetched by Angular's compiler
          "/app/": appAssets,
          "/ClientSrc/app/": appAssets
      },

      exclude: [],
      // reporters: ['progress', 'kjhtml', 'dots', 'trx'],
      reporters: ['progress', 'kjhtml'],

      trxReporter: { outputFile: 'test-results.trx' },

      webpack: webpackConfig,
      webpackMiddleware: {
          stats: 'errors-only'
      },

      client: {
          // Set false to leave Jasmine Spec Runner output visible in browser
          clearContext: true
      },

      coverageIstanbulReporter: {
          reports: ['html', 'lcovonly'],
          fixWebpackSourcePaths: true
      },

      port: 9876,
      colors: true,
      logLevel: config.LOG_INFO,
      autoWatch: true,
      browsers: [
          "Chrome"
          // , "ChromeNoSandbox"
          // , "Firefox"
          // , "IE"
      ],

      // customLaunchers: {
      //     ChromeNoSandbox: {
      //         base: 'Chrome',
      //         flags: ['--no-sandbox']
      //     }
      // },

      singleRun: false,
      concurrency: Infinity
  };

  console.log('before', config.mime); // undefined

  config.set(configuration);

  console.log('after', config.mime); // same as mime setting above
};

My webpack.config has this set as well:

"resolve": {
  "extensions": [
    ".ts",
    ".js"
  ]
...

Answer 1

After hours of debugging karma, I tracked it down a package named mime which karma uses to set Content-Type for a file.

The version I had installed was version 1.3.5. I updated the package to version 1.3.6 and my issue was resolved.

I later found an issue on karma's github page for this @ https://github.com/karma-runner/karma/issues/2702. Probably should have started there first :)