Typescript 网页包+；因果报应+；Mocha：如何在Mocha测试中使用真正的XmlHttpRequest？ 问题

我正在尝试测试使用

XMLHttpRequest

的TypeScript代码。从IDE运行整个Karma测试套件时，测试通过，因为它打开一个浏览器并获得提供的

XmlHttpRequest

和DOM库。以下是Karma run命令供参考：

/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未定义

，因为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：文档未定义

，因为它缺少DOM库-在这里，我认为我需要提供类似

jsdom

和/或

Mocha jsdom

的内容，或者让Mocha在浏览器中运行测试（无论是Firefox还是像PhantomJS这样的无头浏览器）。然而，经过几个小时的尝试，我得出结论，我不知道怎么做

鉴于我目前的项目设置，我如何使用RealXHR运行我的个人Mocha测试

---

项目文件 很可能只有

karma.conf.js

需要更改，但为了完整起见，我已经将它们全部包括在内

test.ts

karma.conf.js

package.json

tsconfig.json

webpack.config.js

---

你不知道……mocha是nodejs，而不是原生js。我会研究使用诸如request、http或request promise之类的库来执行api/async请求。任何浏览器端测试，我都建议检查Gradurator，然后单击调用xmlhttprequests的元素。

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

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

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
        }
    });
};

{
  "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": {}
}

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

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