node.js - 使用来自 WebPack.DefinePlugin 的全局注入(inject)变量进行 NodeJS Mocha 单元测试

Question

通过 WebPack.DefinePlugin 注入(inject)的全局变量似乎与我的 Mocha 单元测试不太吻合。运行测试时无法识别全局变量，Mocha documentation似乎没有办法注入(inject)这些全局变量。

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

详细说明

给定一个具有以下配置的 WebPack 项目:

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

在我的项目中有以下 typescript 代码:

declare let __ENV__: string;

...

export const ENV = __ENV__;

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

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

Mocha 会遇到以下错误:

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 解决了这个问题.
> 索引.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
这取代了 __IS_DEV__ 的注入(inject)。和 __ID_PROD__ Mocha 测试。

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

    }