在 Jest 测试中使用 Webpack 的 DefinePlugin 变量

Posted 2023-02-22

【中文标题】在 Jest 测试中使用 Webpack 的 DefinePlugin 变量

【英文标题】：Use Webpack's DefinePlugin vars in Jest tests

【发布时间】：2018-06-01 05:36:36

【问题描述】：

我是 React 的新手，来自 Angular。我正在为将向外部端点发送请求的代码编写一些测试。显然，我不想在生产代码中硬编码一个真正的主机，所以我想我可以使用 webpack 的DefinePlugin 来保持这个不变。

如何配置 Webpack 和 Jest 一起使用 Webpack 的功能？

【问题讨论】：

我认为理论上是不可能的，因为webpack定义插件的变量是可用的afterwebpack的编译，但是jest脚本运行before编译。

@arikanmstf 使用 Karma 和 Angular 编写测试我能够从 webpack 级别运行它们，这就是我好奇的原因:)

@arikanmstf 这绝对是可行的。您可以轻松定义一个通用的 globals.js 文件，该文件导出一个 key/val 对象并在 jest 和 webpack 中都需要它以进行同步...

【参考方案1】：

如 cmets 中所述：

/globals.js

module.exports = 
  __DEV__: true

/webpack.config.js

const globals = require('./globals.js')

// ...

plugins: [
  new webpack.DefinePlugin(globals)
]

/jest.config.js

const globals = require('./globals.js')

module.exports = 
  // ...
  globals,

【讨论】：

这在字符串的情况下不起作用，因为 Webpack 将源代码替换为值，而是将值分配给变量。所以，假设x 是"myConfigPath"，开玩笑的一定是x: "myConfigPath" 而开玩笑的一定是x: '"myConfigPath"'，因为webpack 替换了变量而不是给它赋值

确实，我忘记提了；感谢您的精确度，它肯定会帮助其他人:)

【参考方案2】：

就像你的 package.json 或 jest.config.js 中的那样：

"jest": "globals": "__DEV__": true

如果您仍有任何问题，请在此处查看 jest 官方文档：

globals-object

【讨论】：

这非常有效。应该是公认的答案。

这是唯一的方法吗？有没有办法将 jest 直接连接到 webpack 定义的插件？

我不知道为什么，但我不得不把它放在“jest.config.js”文件中，当它在“package.json”时被忽略了。