使用 lodash 和 Jest 测试 Vue 组件时出现“orderBy”未定义错误

Posted 2023-02-21

【中文标题】使用 lodash 和 Jest 测试 Vue 组件时出现“orderBy”未定义错误

【英文标题】：Getting 'orderBy' undefined error when testing Vue component using lodash with Jest

【发布时间】：2018-11-04 16:24:51

【问题描述】：

有一个 Vue 应用程序已将 lodash 导入 main.js，例如：

import lodash from 'lodash'

Vue.use(VueLodash, lodash)

然后我可以在我的单个文件组件中使用 lodash orderBy 函数，例如： this._.orderBy(this.comments, 'updated_at', 'desc')

一切正常。

当我使用 Jest 运行测试时，它会引发以下错误： Cannot read property 'orderBy' of undefined

如何让 Jest 像 Vue 一样识别 _？

【问题讨论】：

你是怎么解决这个问题的？

@silva96 我已经添加了一个答案，以防你还在寻找一个

【参考方案1】：

我可以解决一个类似的问题（在this article 的帮助下）。 TLDR： 在你的组件规范中添加一个“localVue”，然后将 lodash 与这个 localVue 实例一起使用：

import YourComponent from '@/YourComponent.vue'
import  createLocalVue, mount, config  from '@vue/test-utils'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'

const localVue = createLocalVue()
localVue.use(VueLodash,  lodash )

...

const wrapper = mount(YourComponent, 
  localVue
)