How to execute karma index.html file before all others?

Question

I have the following karma config file (relevant properties):

 files: [
      { pattern: './src/*.html', watched: true, served: true, included: false },
      // polyfill for es6 Promise
      'node_modules/es6-promise/dist/es6-promise.auto.js',
      // polyfill for fetch.js
      'node_modules/whatwg-fetch/fetch.js',
      './src/**/*.ts'
    ],
    preprocessors: {
      '**/*.html': ['html2js'],
      '**/*.ts': 'karma-typescript',
      'karma-babel-preprocessor': ['babel']
    },

I'm using an ES6 Module project (no React, Angular2+ setup) and trying to set up my tests to run properly.

The main problem is that in my .ts file (not spec.ts --> file aimed for testing only) I have a doccument.getElementById('').someAttribute which breaks at test run time because it's null. The reason this happens is because index.html hasn't been set up yet by karma.

How do I solve the problem of index.html first being built and then all other .ts files...

Error after running npm test : *

"message": "Uncaught TypeError: Cannot set property 'innerHTML' of null\\nat

Answer 1

Have you tried instead of 'karma-babel-preprocessor' and 'karma-typescript' to use 'webpack' with transpilation either Babel or Typescript?

Here is https://www.npmjs.com/package/awesome-typescript-loader that can be used for TypeScript handling with webpack.

There might be kind of conflict also of using both Babel and Typescript because Typescript can transpile without babel but it is something that you can handled in webpack config. Here is how 'karma.conf' might look like with Babel:

const webpack = require('webpack');

module.exports = function (config) {
var configuration = {
    browsers: ['Chrome'],
    files: [
        { pattern: 'test/**/*.js', watched: true },
    ],
    frameworks: ['jasmine'],
    preprocessors: {
        'test/**/*.js': ['webpack'],
    },
    webpack: {
        module: {
            loaders: [
                { test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: JSON.stringify('test')
                }
            })
        ],
        watch: true
    },
    webpackServer: {
        noInfo: true
    }
};
config.set(configuration);
};