Jest无法加载vue-cookies模块导致Vue组件mounted钩子报错求助

你遇到的核心问题是：Jest运行测试时，Vue组件里的this.$cookies没有被正确初始化，导致调用get方法时抛出Cannot read property 'get' of undefined错误。这是因为vue-cookies作为Vue插件，在测试环境中没有被挂载到Vue实例上，下面给你几个实用的解决方案：

方案1：在测试文件中全局安装vue-cookies插件 #

如果你的多个测试都需要用到vue-cookies，可以在测试文件开头直接将插件安装到Vue全局实例：

import Vue from 'vue'
import VueCookies from 'vue-cookies'
import ChatApp from '@/components/ChatApp.vue'

// 全局安装插件，让所有测试的Vue实例都能访问$cookies
Vue.use(VueCookies)

// 后续的测试逻辑
test('组件挂载时获取昵称', () => {
  const wrapper = shallowMount(ChatApp)
  // ... 你的测试断言
})

方案2：用Jest Mock模拟$cookies对象（推荐单元测试使用） #

如果你只想针对当前组件的测试模拟$cookies的行为，不需要真的依赖插件，可以通过Vue Test Utils的mocks选项注入一个模拟的$cookies：

import { shallowMount } from '@vue/test-utils'
import ChatApp from '@/components/ChatApp.vue'

test('组件挂载时正确获取昵称', () => {
  // 模拟$cookies的get方法，预设返回值
  const mockCookies = {
    get: jest.fn(() => 'test-user')
  }

  const wrapper = shallowMount(ChatApp, {
    mocks: {
      $cookies: mockCookies
    }
  })

  // 可以断言get方法是否被调用
  expect(mockCookies.get).toHaveBeenCalledWith('nickname')
  expect(wrapper.vm.current_nickname).toBe('test-user')
})

这种方式更适合单元测试，能让你精准控制依赖的行为，避免外部插件影响测试结果。

方案3：使用createLocalVue隔离插件安装 #

如果你希望插件只作用于当前组件的测试，不影响全局Vue实例，可以用createLocalVue创建一个本地Vue实例，再安装插件：

import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueCookies from 'vue-cookies'
import ChatApp from '@/components/ChatApp.vue'

// 创建本地Vue实例
const localVue = createLocalVue()
// 在本地实例上安装插件
localVue.use(VueCookies)

test('组件挂载时获取昵称', () => {
  const wrapper = shallowMount(ChatApp, {
    localVue // 将本地Vue传入测试
  })
  // ... 你的测试断言
})

额外提醒 #

注意你提到把vue-cookies安装到了devDependencies，如果你的项目生产环境也需要用到这个插件，建议把它移到dependencies里：

npm install vue-cookies --save

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