Webpack + Karma + Mocha: How do I use real XmlHttpRequest in Mocha tests?

Question

Problem

I'm trying to test TypeScript code that uses XMLHttpRequest. When running the whole Karma test suite from the IDE, the test passes because it opens a browser and gets the XmlHttpRequest and DOM libraries provided. For reference, here is the Karma run command:

/usr/local/bin/node /Applications/WebStorm.app/Contents/plugins/js-karma/js_reporter/karma-intellij/lib/intellijServer.js --karmaPackageDir=/Users/user/project/node_modules/karma --configFile=/Users/user/project/karma.conf.js

... However, when running the test individually (by right-clicking the test and selecting 'run' on it in the WebStorm IDE), it fails with the message ReferenceError: XMLHttpRequest is not defined because Mocha is not set up to open a browser (and thus is not provided with the XmlHttpRequest or DOM libraries). For reference, this Mocha command is:

/usr/local/bin/node /Users/user/project/node_modules/mocha/bin/_mocha --require ts-node/register --ui bdd --reporter /Applications/WebStorm.app/Contents/plugins/NodeJS/js/mocha-intellij/lib/mochaIntellijReporter.js /Users/user/project/tests/test.ts --grep "XHR "

I can provide the xmlhttprequest library, but Mocha then complains ReferenceError: document is not defined because it lacks a DOM library - here, I think I need to provide something like jsdom and/or mocha-jsdom or get Mocha to run its tests in a browser (whether Firefox or a headless browser like PhantomJS). However, after many hours of trying, I conclude that I can't figure out how.

Given my current project setup, how can I run my individual Mocha tests using real XHR?

---

Project files

Most likely only karma.conf.js needs changing, but I have included them all for completeness.

test.ts

import { expect } from 'chai';
// import {jsdom} from 'jsdom'; // mocha-jsdom?

describe("XHR", () => {
    it("Test should not fail upon XHR.", function(){
        new XMLHttpRequest();
    });
});

karma.conf.js

var path = require("path");
var webpackConfig = require("./webpack.config");

module.exports = function(config) {
    config.set({
        autoWatch: true,
        basePath: "",
        client: {
            mocha: {
                reporter: 'html'
                // require: [require.resolve('jsdom_setup.js')]
            }
        },
        browsers: ["Firefox"],
        colors: true,
        exclude: [],
        files: [
            "tests/test.ts"
        ],
        frameworks: ["mocha", "chai"],
        logLevel: config.LOG_INFO,
        plugins: [
            "karma-*"
            // "jsdom"
            // "mocha-jsdom"
        ],
        port: 9876,
        preprocessors: {
            "*.ts": ["webpack"]
        },
        reporters: ["mocha"],
        singleRun: false,
        webpack: {
            module: webpackConfig.module,
            resolve: webpackConfig.resolve
        }
    });
};

package.json

{
  "name": "despair",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack --config webpack.config.js --display-error-details",
    "test": "karma start karma.conf.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/chai": "^3.4.35",
    "@types/mocha": "^2.2.40",
    "chai": "^3.5.0",
    "jsdom": "^9.12.0",
    "karma": "^1.5.0",
    "karma-chai": "^0.1.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.2",
    "karma-webpack": "^2.0.2",
    "mocha": "^3.2.0",
    "ts-loader": "^2.0.1",
    "ts-node": "^2.1.0",
    "typescript": "^2.1.5",
    "watch": "^1.0.1",
    "webpack": "^2.2.0-rc.7"
  },
  "dependencies": {}
}

tsconfig.json

{
    "compilerOptions": {
        "watch": true,
        "sourceMap": true,
        "target": "es3",
        "baseUrl": ".",
        "outDir": "./build",
        "allowJs": true,
        "types": ["mocha", "chai"] // Note: implicit in TypeScript 2
    }
}

webpack.config.js

var webpack = require("webpack");

module.exports = {
    /* Output bundle name : entry point */
    entry:  {
        "./build/Entry" : "./src/Entry.ts"
    },
    output: {
        filename: '[name].js',
        libraryTarget: 'this'
    },
    devtool: 'source-map',
    resolve: {
        modules: [".", "node_modules"],
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader"
            } 
        ]
    }
    , plugins: []
};