测试：mocha + typescript + webpack

Question

我使用 TypeScript、Mocha（带有 mocha-typescript 插件）进行测试，使用 WebPack 构建我的应用程序。

最近我决定为 WebPack 添加 DefinePlugin 来分离 prod 和 dev 环境的配置：

import { AppSettings as DevSettings } from './appSettings.dev'
import { AppSettings as ProdSettings } from './appSettings.prod'

declare var __ENVIRONMENT__: string;

let settings = __ENVIRONMENT__ === 'prod' ? ProdSettings : DevSettings

export let AppSettings = settings;

在上面的 sn-p 中有一个全局变量 __ENVIRONMENT__ ，它有助于选择我想要使用的设置。这个变量在 webpack.config.js 中定义如下：

module.exports = function(env) {
    var config = {
        // ...
        plugins: [
            new ExtendedDefinePlugin({
                __ENVIRONMENT__: env === 'prod' ? 'prod' : 'dev',
            })
        ]
        // ...
    }

    return config;
}

所以我将 package.json 中的测试执行更改为

"test": "webpack --env=dev && mocha --recursive"

如果我调用“test”，mocha 会抛出错误（webpack 正确构建文件）：

ReferenceError: __ENVIRONMENT__ is not defined

测试观察者也不起作用：

"test-watch": "mocha-typescript-watch"

抛出错误“Exited with 1”。

有没有可能让他们一起工作？或者我应该使用其他方式进行测试？

Answer 1

好吧，我最终得到了我以错误的方式使用它。

在 webpack.config.js 中设置 Node 相关的变量比较正确：

module.exports = function(env) {
    var config = {
        // ...
        plugins: [
            new ExtendedDefinePlugin({
                'process.env': {
                    'NODE_ENV': env === 'prod' ? 'prod' : 'dev',
                }
            })
        ]
        // ...
    }

    return config;
}

并在必要时使用它，例如：

declare var process: any;

export let AppSettings = process.env.NODE_ENV === 'prod' ? ProdSettings : DevSettings;

因此我的 Mocha 测试运行良好（因为它们是在 Node 中执行的，而不是在浏览器中）。