Vue + Jest 模拟全局方法答案

【问题标题】：Vue + Jest mocking global methodVue + Jest 模拟全局方法
【发布时间】：2019-11-22 10:40:12
【问题描述】：

我正在处理一个在index.html 文件的脚本标记中定义的方法的项目。出于某种原因，这会导致 Jest 在运行时失败。

index.html

<script>
var getCookie = function(cookieVal) { return cookieVal; }
</script>

为了解决这个问题，我尝试在 Jest 全局变量中定义“getCookie”变量，例如：

package.json

"jest": {
  "globals": {
      "getCookie": "someString"
    }
}

这确实定义了getCookie，但是当我运行我的测试时，我得到了这个错误：

data() 中的错误：“TypeError: getCookie 不是函数”

这是有道理的，但我不确定如何将其定义为 globals 对象中的函数。

如何在 Jest 中模拟我的 getCookie 函数？

【问题讨论】：

标签： javascript vue.js jestjs

【解决方案1】：

即使Jest docs indicate that globals cannot contain functions，我也验证了全局函数仍然可以用function expression 或arrow function 定义：

{
  jest: {
    globals: {
      getCookie() { return 'someCookie' },  // function expression
      getCookie: () => 'someCookie',        // arrow function
    }
  }
}

或者，您可以定义一个设置global.getCookie 的setupFiles：

// package.json
{
  jest: {
    setupFiles: ['./jest.setup.js']
  }
}

// jest.setup.js
global.getCookie = () => 'someCookie'

【讨论】：