无法使用Typescript，Webpack导入Karma.js中的类

Question

我一直在尝试让Karma.js与我的基本测试套件一起使用。该站点可在浏览器中工作，因此代码本身很好。我遇到了一些问题，但是即使经过数小时的努力，我仍然无法解决。这是我的测试文件-如果我取消注释有关存储的内容（用// TODO注释），则它将崩溃，但是即使我注释掉它，也可以通过ok，即使我导入Page模块也是如此。似乎只有导致崩溃的商店

//TODO UNCOMMENT THIS LINE import { Store } from "../../js/react/utils/store"
import { Page } from "../../js/react/utils/consts"
import { assert } from "chai"

describe('Array', function() {
    it('should start empty', function() {
        var arr = []
        assert.equal(arr.length, 0)
    })
    it('Tests importing Page', () => {
        //TODO UNCOMMENT THIS LINE const default_store = new Store()
        //TODO UNCOMMENT THIS LINE assert(default_store.page == Page.landing)
        assert("__LANDING_PAGE__" == Page.landing)
    })
})

这是错误消息

... all the webpack output saying it compiled ok ...
16 08 2018 21:31:59.648:INFO [karma]: Karma v3.0.0 server started at http://0.0.0.0:9876/
16 08 2018 21:31:59.649:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
16 08 2018 21:31:59.688:INFO [launcher]: Starting browser PhantomJS
16 08 2018 21:32:00.636:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket KYSAZvAPo7_oibqeAAAA with id 80055480
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  {
    "message": "ReferenceError: Can't find variable: Symbol\nat test/unit/store.test.ts:12084:22",
    "str": "ReferenceError: Can't find variable: Symbol\nat test/unit/store.test.ts:12084:22"
  }

Finished in 0.086 secs / 0 secs @ 21:32:00 GMT+1000 (AEST)

SUMMARY:
✔ 0 tests completed
npm ERR! code ELIFECYCLE
npm ERR! errno 1
...etc. etc. more npm errors...

这是Store模块，它使用mobx及其装饰器装饰器。如前所述，该类可以正常运行，并且使用当前的webpack.config.js可以完美地进行编译，只是karma / phantomJS无法工作

// import * as React from "react";
import { observable, action } from "mobx"
// import { observer } from "mobx-react";
import { AVATARS, Page } from "./consts"
import { Bot } from "../models/bot"
import { Message } from "../models/message"
import { WebsocketService } from "./websocket_service"


/*
**  A global store, accessible by any component decorated with
**  @observable
**
*/


//TODO create hover_type here
// Props object for LandingPage
class LandingStore {
    @observable current_hover: "__MENU__" | Bot | null = null
    constructor() {
        this.current_hover = null
    }

    @action set_hover(new_hover: "__MENU__" | Bot | null) {
        this.current_hover = new_hover
    }
}

class ChatWindowStore {
    @observable messages: Array<Message>
    constructor() {
        this.messages = []
    }

    @action msg_in(msg: Message) {
        this.messages.push(msg)
    } // When receiving msgs

//   @computed get size() { return this.messages.length }
//   indexOf(ii: number) { return this.messages[ii] }

}

// Global store
export class Store {

    // websocket connection
    @observable channel = WebsocketService.initialize_channel(this) //this._initializeChannel(this.socket)
    // @observables
    @observable page: Page
    @observable some_global_value: number
    @observable current_bot: Bot
    // Individual stores
    @observable landing_page: LandingStore
    @observable chat_window: ChatWindowStore
    constructor() {
        this.page = Page.landing
        this.some_global_value = 1337
        this.current_bot = new Bot("Captain Moonbeam", AVATARS.CAPTAIN_MOONBEAM)
        this.landing_page = new LandingStore()
        this.chat_window = new ChatWindowStore()
    }

    public static bs() {
        return 1
    }

    // @actions
    @action change_page(newPage: Page) { this.page = newPage }
    @action reset() { this.constructor() } //TODO also delete session & cookies
    @action increment() {
        console.log("CLICKED!")
        this.some_global_value++
    }
    @action change_bot(bot: Bot) {
        this.current_bot = bot
    }
}

这是我的karma.conf.ts，请原谅不必要的注释。我尝试了很多事情，包括不使用webpack进行转译，使用不同的浏览器引擎，使用不同的文件路径，使用许多典型的调试工具

module.exports = function(config: any) {
    config.set({
        frameworks: ['mocha'],
        // basePath: "./",
        files: [
            "test/**/*.ts",
            // "js/app.js"
        ],
        preprocessors: {
            // "js/app.js": ["webpack"],
            // "**/*.tsx": ["webpack"],
            "**/*.ts": ["webpack"]
        },
        plugins : [
            'karma-mocha',
            'karma-mocha-reporter',
            'karma-phantomjs-launcher',
            // 'karma-chrome-launcher',
            'karma-webpack',
            'karma-typescript-preprocessor'
            // 'karma-chai',
            // 'karma-coverage',
        ],
        // typescriptPreprocessor: {
        //  // options passed to the typescript compiler
        //  options: {
        //      sourceMap: false, // (optional) Generates corresponding .map file.
        //      target: 'ES3', // (optional) Specify ECMAScript target version: 'ES3' (default), or 'ES5'
        //      module: 'commonjs', // (optional) Specify module code generation: 'commonjs' or 'amd'
        //      noImplicitAny: true, // (optional) Warn on expressions and declarations with an implied 'any' type.
        //      noResolve: true, // (optional) Skip resolution and preprocessing.
        //      removeComments: true, // (optional) Do not emit comments to output.
        //      concatenateOutput: false // (optional) Concatenate and emit output to single file. By default true if module option is omited, otherwise false.
        //  },
        //  // transforming the filenames
        //  // transformPath: function(path) {
        //  //   return path.replace(/\.ts$/, '.js');
        //  // }
        // },
        webpack: require('./webpack.config.js'),
        reporters: ["mocha"],
        browsers: ["PhantomJS"],
        // browsers: ["Chrome"],
        // colors: true,
        // logLevel: config.LOG_INFO,
    });
};

webpack.config.js

const path = require("path")
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin")

const config = {
    entry: [
        path.resolve(__dirname, "css/app.css"), 
        path.resolve(__dirname, "js/app.js")],
    output: {
        path: path.resolve(__dirname, "../priv/static"),
        filename: "js/app.js"},
    mode: 'development',
    devtool: "inline-source-map",
    // devtool: 'source-map',
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"],
        modules: ["deps", "node_modules"]
      },
    module: {
        rules:
        [{
            test: /\.jsx?$/,
            use: "babel-loader"
        },
        {
            test: /\.tsx?$/,
            use: ["babel-loader", "ts-loader"] //NOTE loaders are applied last-first
        },
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        },
        {
            test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
            loader: 'file-loader?name=fonts/[name].[ext]'
        }]
    },
    plugins: [
        new ExtractTextPlugin("css/app.css"),
        new CopyWebpackPlugin([{ from: "static" }])
    ]
};

module.exports = config;

这是我的tsconfig.js，为了好运

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true,
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "experimentalDecorators": true // https://mobx.js.org/best/decorators.html
  },
  "exclude": [
    "node_modules",
    "priv",
    "ts-build",
    "webpack",
    "jest"
  ]
}