Vue2+Nuxt使用@nuxtjs/composition-api时Jest测试state为undefined报错

• 首先你测试环境未注册@nuxtjs/composition-api插件，导致组件setup函数无法正常执行，最终模板访问state时拿到的是undefined，才触发Cannot read property 'data' of undefined报错，和reactive函数本身无关。
• 你用到了Nuxt专属的useContext()方法获取store，但测试环境未对该API做Mock，会导致setup函数执行中断，无法返回state对象。
• 测试代码中给shallowMount传递的data()配置和propsData: { data: mockOrder }均无效：前者是给Vue2选项式API的data选项传值，无法触及Composition API在setup内定义的响应式状态；后者你组件根本没有声明接收data属性，传了也不会被组件读取。
• 额外逻辑问题：你setup内初始给state.data赋值的是空数组，但模板直接访问state.data.talkboard，数组不存在talkboard属性，即使前面问题修复，后续也会触发新的报错。

1. 测试文件中给localVue注册@nuxtjs/composition-api插件：

import { CompositionApi } from '@nuxtjs/composition-api';
// 在beforeEach或者测试用例内注册
localVue.use(CompositionApi);

2. MockuseContext返回值，避免调用报错：

// 在测试文件顶部加Mock逻辑
jest.mock('@nuxtjs/composition-api', () => {
  const original = jest.requireActual('@nuxtjs/composition-api');
  return {
    ...original,
    useContext: () => ({
      store: {
        // 按你实际用到的store方法/属性Mock即可
        state: {},
        dispatch: jest.fn()
      }
    })
  }
})

3. 如果你不需要测试fetch方法的请求逻辑，可以在挂载组件后直接手动给state赋值：

const wrapper = shallowMount(List, {
  localVue,
  vuetify,
  mocks: { $t, localePath },
});
// 手动给setup返回的state赋值
wrapper.vm.state.data = {
  talkboard: [
    { cs_id: 123 }
  ]
}
// 等待视图更新后再执行断言
await wrapper.vm.$nextTick()

4. 修复模板逻辑，确保state.data的结构和你访问的属性匹配，或者加可选链判断：

<div v-for="item in state.data?.talkboard || []" :key="item.cs_id">

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