typescript - Webpack + Karma + Mocha：我如何在 Mocha 測試中使用真正的 XmlHttpRequest？

問題

我正在嘗試測試使用 XMLHttpRequest 的 TypeScript 代碼。當從 IDE 運行 整個 Karma 測試套件 時，測試 通過，因為它打開了一個瀏覽器並獲取了提供的 XmlHttpRequest 和 DOM 庫。供參考，這裡是 Karma 運行命令：

/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

... 但是，當單獨運行測試（在 WebStorm IDE 中右鍵點擊測試並選擇「運行」）時，它會 失敗，並顯示訊息 ReferenceError: XMLHttpRequest is not defined，因為 Mocha 並未設置為打開瀏覽器（因此沒有提供 XmlHttpRequest 或 DOM 库）。供參考，這個 Mocha 命令是：

/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 "

我可以提供 xmlhttprequest 函式庫，但 Mocha 接著會抱怨 ReferenceError: document is not defined，因為缺少 DOM 函式庫——在這裡，我想我需要提供像 jsdom 和/或 mocha-jsdom 之類的東西，或者讓 Mocha 在瀏覽器中運行測試（不論是 Firefox 還是像 PhantomJS 這樣的無頭瀏覽器）。然而，經過數小時的嘗試後，我得出結論，我無法搞清楚該怎麼做。

鑑於我目前的專案設定，我該如何使用真實 XHR 執行我的單個 Mocha 測試？

專案檔案

最有可能只需要更改 karma.conf.js，但我已經將它們全部包括在內以求完整。

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: []
};