使用Jest测试Vue组件时遇_.orderBy未定义错误，如何解决？

哈哈，这个坑我踩过！你遇到的问题本质是Jest测试环境不会自动继承你main.js里的全局Vue配置——毕竟测试时组件是被单独渲染的，没走全局的插件注册流程，所以this._就变成undefined啦。给你几个实用的解决办法：

方法1：在单个测试文件中手动注册VueLodash #

如果只是个别组件测试需要，直接在测试文件开头复刻main.js里的插件注册逻辑就行：

import Vue from 'vue'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'
import YourComponent from '@/components/YourComponent.vue'

// 先注册插件，再渲染组件
Vue.use(VueLodash, lodash)

describe('YourComponent', () => {
  // 这里写你的测试用例，比如：
  it('orders comments by updated_at descending', () => {
    const wrapper = mount(YourComponent)
    // ... 执行断言逻辑
  })
})

方法2：全局配置Jest，一劳永逸 #

如果多个组件都用到了this._，推荐配置Jest的全局setup文件，不用每个测试都重复写注册代码：

1. 在项目根目录创建jest.setup.js文件，内容如下：

import Vue from 'vue'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'

Vue.use(VueLodash, lodash)

2. 打开jest.config.js，添加setup文件的配置：

module.exports = {
  // 其他已有的配置项...
  setupFilesAfterEnv: ['./jest.setup.js']
}

这样所有测试文件在运行前都会自动执行这个setup文件，全局注册VueLodash。

方法3：局部注入_到组件实例 #

如果不想全局注册，也可以在渲染组件时通过mocks选项直接给当前组件实例注入_：

import { mount } from '@vue/test-utils'
import lodash from 'lodash'
import YourComponent from '@/components/YourComponent.vue'

describe('YourComponent', () => {
  it('handles comment ordering correctly', () => {
    const wrapper = mount(YourComponent, {
      mocks: {
        _: lodash // 直接把lodash挂载到组件实例的_属性上
      }
    })
    // 这里可以正常测试依赖this._的逻辑了
  })
})

选哪种方法看你的需求：如果全局都用，方法2最省心；如果只是个别测试需要，方法1或3更灵活。

内容的提问来源于stack exchange，提问作者andreofthecape