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

Posted 2023-03-07

【中文标题】使用来自 WebPack.DefinePlugin 的全局注入变量进行 NodeJS Mocha 单元测试

【英文标题】：NodeJS Mocha unit testing with global injected variables from WebPack.DefinePlugin

【发布时间】：2018-11-29 20:44:45

【问题描述】：

通过 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

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)
    ...

我尝试了什么

我想我应该在我的entry.ts 文件中定义__ENV__。运行 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.

【问题讨论】：

你解决了吗？

对不起@deathangel908 但没有。我改用Jest，也避免使用WebPack.DefinePlugin。现在（因为它是一个 web 应用程序）我使用代码隐藏来填充 window 对象，然后在我的 Jest 设置中，我在 beforeAll() 中定义了一个测试 window 对象。

该死的。同样的问题。 :(

【参考方案1】：

✨哇哦?

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

> 索引.ts

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

这通常被 webpack 取代。

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

declare global 
  /** https://***.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__ 和 __ID_PROD__ 的注入以进行 mocha 测试。

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