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

【问题标题】：Use Webpack's DefinePlugin vars in Jest tests在 Jest 测试中使用 Webpack 的 DefinePlugin 变量
【发布时间】：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 中所述：

module.exports = {
  __DEV__: true
}

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

// ...

plugins: [
  new webpack.DefinePlugin(globals)
]

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 官方文档：

【讨论】：