Question

通过WebPack.DefinePlugin注入的全局变量似乎与我的Mocha单元测试无法很好地融合在一起。运行测试时无法识别全局变量，并且Mocha documentation似乎没有办法注入这些全局变量。

如何注入这些变量以便它们在单元测试中起作用？

详细说明

给出具有以下配置的WebPack项目：

{
    ...
    plugins: [
        ...
        new webpack.DefinePlugin({
            __ENV__: JSON.stringify(process.env.ENVIRONMENT),
            ...
        }),
        ...
    ]
}

在我的项目中有以下打字稿代码：

declare let __ENV__: string;

...

export const ENV = __ENV__;

如果我使用以下选项运行Mocha：

mocha --compilers ts:ts-node/register --require ./test/entry.ts **/*.test.ts

摩卡咖啡会遇到以下错误：

C:\git\project\src\constants\config.ts:7
export const ENV = __ENV__;
                   ^
ReferenceError: __ENV__ is not defined
    at Object.<anonymous> (C:\git\project\src\constants\config.ts:7:20)
    ...

我尝试过的

我想应该在__ENV__文件中定义entry.ts。在运行mocha时，以下尝试均失败，并出现各种错误：

const __ENV__ = 'dev'; // Same message as above.
window.__ENV__ = 'dev'; // Property '__ENV__' does not exist on type 'Window'.
window['__ENV__'] = 'dev'; // ReferenceError: window is not defined
global.__ENV__ = 'dev'; // Property '__ENV__' does not exist on type 'Global'.
export declare let __ENV__ = 'dev'; // Initializers are not allowed in ambient contexts.
export declare const __ENV__ = 'dev'; // Initializers are not allowed in ambient contexts.

Answer 1

✨呜呼 ?

我已经使用 https://stackoverflow.com/a/62874686/5244937 解决了这个问题。

> index.ts

这是我的中心环境。我有两个类（DevTool、EmptyProdTool）为 DEV 和 PROD 实现不同的行为。

这通常被 webpack 代替。

import { DevTool } from "./dev";
import { EmptyProdTool } from "./prod";

declare global {
  /** https://stackoverflow.com/a/62874686/5244937 */
  var __IS_DEV__: boolean;
  var __IS_PROD__: boolean;
}

export interface ENVClass {
  dev_log(message: any): void;
  dev_error(message: any): void;
  backgroundColor: string;
  isDev: boolean;
  isProd: boolean;
}

export const ENV = __IS_DEV__ ? new DevTool() : new EmptyProdTool();

> webpack.config.js

plugins: [

    ...

      new webpack.DefinePlugin({
        __IS_DEV__: JSON.stringify(env.NODE_ENV == "development"),
        __IS_PROD__: JSON.stringify(env.NODE_ENV == "production")
      }),
    
    ...

    ]

> 测试/_env_injection.ts

这取代了为 mocha 测试注入 __IS_DEV__ 和 __ID_PROD__。

/** https://stackoverflow.com/a/62874686/5244937 */
globalThis.__IS_DEV__ = true;
globalThis.__IS_PROD__ = false;

> package.json > 在没有 webpack 的情况下启动 mocha 和 ts-node

  "scripts": {

    "test": "mocha -r ts-node/register --require test/_env_injection.ts test/**/*.spec.ts",

    }

使用来自WebPack.DefinePlugin的全局注入变量进行NodeJS Mocha单元测试