Nuxt2+Composition API测试中useContext的store未定义问题求助

核心原因 #

你通过jest.mock('@nuxtjs/composition-api')自动mock了整个库，但默认情况下所有导出的方法都会被替换为返回undefined的jest函数，所以useContext()调用后拿到的是undefined，解构store时自然报错。

解决方案 #

1. 正确mock useContext方法 #

在测试文件中，不要仅简单mock整个库，而是手动指定useContext的返回值：

import { mount } from '@vue/test-utils'
import Component from '@/path-to-component/Component.vue'
import { useContext } from '@nuxtjs/composition-api'

// mock指定方法，保留其他方法的原有实现并返回包含mock store的context
jest.mock('@nuxtjs/composition-api', () => ({
  ...jest.requireActual('@nuxtjs/composition-api'),
  useContext: jest.fn(() => ({
    store: {
      getters: {
        'data': { key: 1 } // 根据组件需求mock对应的getters
      }
    }
  }))
}))

describe('Component.vue', () => {
  const factory = (mockDataForm) => {
    return mount(Component, {
      propsData: { /* 你的props数据 */ },
      provide: { form: mockDataForm }
    })
  }

  test('component mounts properly', () => {
    const wrapper = factory({ /* 你的form数据 */ })
    expect(wrapper.vm).toBeTruthy()
  })
})

2. 全局统一mock（可选） #

如果多个测试文件都需要用到useContext的mock，可以在test/vueSetup.js中添加全局配置：

import Vue from 'vue'
import Buefy from 'buefy'
import VueFormulate from 'UILIBRARY/vue-formulate/src/Formulate'
import { config } from '@vue/test-utils'

Vue.use(Buefy)
Vue.use(VueFormulate)

config.mocks.$t = (key) => key
config.mocks.$tc = (key) => key

// 全局mock useContext
jest.mock('@nuxtjs/composition-api', () => ({
  ...jest.requireActual('@nuxtjs/composition-api'),
  useContext: jest.fn(() => ({
    store: {
      getters: {}, // 默认mock，测试文件中可按需覆盖
    }
  }))
}))

之后在单个测试文件中，若需自定义store内容，可覆盖mock：

import { useContext } from '@nuxtjs/composition-api'

// 在测试用例前覆盖返回值
useContext.mockReturnValue({
  store: {
    getters: { 'data': { key: 1 } }
  }
})

3. 同步vue-demi的jest别名 #

你的nuxt.config.js中已将vue-demi alias到@nuxtjs/composition-api，需在jest环境同步配置，在jest.config.js的moduleNameMapper中添加：

moduleNameMapper: {
  // ...其他映射规则
  '^vue-demi$': '@nuxtjs/composition-api'
}

避免UI库中的vue-demi调用与Nuxt的composition-api不一致。

针对疑问的解答 #

• 是否需要添加Vuex？ 不需要。Nuxt2本身集成Vuex，测试环境只需mock对应store结构即可，无需引入完整Vuex。
• 问题是否只与store相关而非context？ 不是。根源是useContext()返回了undefined，你根本没拿到context对象；而$t/$tc能正常工作是因为它们是通过Vue原型的mock（config.mocks），和useContext的调用机制完全不同。
• 问题是否出在组件代码而非测试代码？ 组件代码无问题，正常Nuxt环境中useContext()能正确获取context。问题完全出在测试中的mock方式错误，导致useContext()未返回预期的context对象。

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