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

Question

通过 WebPack.DefinePlugin 注入的全局变量似乎与我的 Mocha 单元测试不兼容。在运行测试时，这些全局变量无法被识别，而 Mocha 文档 似乎没有一种方法来注入这些全局变量。

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

详细描述：

假设有一个具有以下配置的 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)
    ...

我的尝试

我认为我应该在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.

- Daniel

---

你解决了这个问题吗？ - deathangel908

抱歉@deathangel908但是不行。我改用Jest并且避免使用Webpack.DefinePlugin。现在因为它是一个Web应用程序，我使用代码后台来填充window对象，然后在我的 Jest 设置中，我 在beforeAll（）中定义了一个测试窗口对象。 - Daniel

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

Answer 1

✨ Whoohoo

我已经使用https://dev59.com/Jbzpa4cB1Zd3GeqPERle#62874686解决了这个问题。

> index.ts

这是我的中央环境位置。我有两个类（DevTool，EmptyProdTool）分别实现DEV和PROD的不同行为。

这通常由webpack替换。

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

declare global {
  /** https://dev59.com/Jbzpa4cB1Zd3GeqPERle#62874686 */
  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")
      }),
    
    ...

    ]

> tests/_env_injection.ts

这个文件用于替换mocha测试中的__IS_DEV__和__ID_PROD__注入。

/** https://dev59.com/Jbzpa4cB1Zd3GeqPERle#62874686 */
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",

    }

- mararn1618