typescript - Webpack + Karma + Mocha: Mocha testlerinde gerçek XmlHttpRequest'i nasıl kullanabilirim?


Problem

TypeScript kodunu test etmeye çalışıyorum ve bu kod XMLHttpRequest kullanıyor. IDE'den tüm Karma test paketi çalıştırıldığında, test geçiyor çünkü bir tarayıcı açılıyor ve sağlanan XmlHttpRequest ve DOM kütüphanelerine erişiliyor. Referans için, işte Karma çalıştırma komutu:

/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

... Ancak, testi tek başına çalıştırdığınızda (teste sağ tıklayıp WebStorm IDE'de 'çalıştır' seçeneğini seçerek), başarısız oluyor ve ReferenceError: XMLHttpRequest is not defined mesajını veriyor çünkü Mocha bir tarayıcı açacak şekilde kurulmamış (dolayısıyla XmlHttpRequest veya DOM kütüphaneleri sağlanmamış). Referans olması açısından, bu Mocha komutu şudur:

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

Ben xmlhttprequest kütüphanesini sağlayabilirim, ama Mocha daha sonra ReferenceError: document is not defined hatası veriyor çünkü bir DOM kütüphanesi eksik - burada, sanırım jsdom ve/veya mocha-jsdom gibi bir şey sağlamam veya Mocha'nın testlerini bir tarayıcıda (Firefox veya PhantomJS gibi başsız bir tarayıcıda) çalıştırmasını sağlamam gerekiyor. Ancak, saatlerce denedikten sonra, nasıl yapacağımı çözemedim.

Mevcut proje yapım göz önüne alındığında, bireysel Mocha testlerimi gerçek XHR kullanarak nasıl çalıştırabilirim?

Proje dosyaları

Muhtemelen yalnızca karma.conf.js dosyasının değiştirilmesi gerekiyor, ama eksiksiz olması için hepsini ekledim.

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