[Vue warn]: data() 中的错误：“TypeError: 无法解构 '(0, _compositionApi.useContext)(...)' 的属性 'store'，因为它未定义。”

Question

Nuxt2我正在使用@nuxtjs/composition-api和 在应用程序上设置测试@vue/test-utils。

此外，还有一个使用 @和 的vue-CLIUI 库。vue/composition-apivue-demi

问题是，即使context按照此处的解决方案进行了嘲笑，我们的商店仍然存在undefined并且测试失败。

///// SET UP /////

该Nuxt2应用程序设置如下：

Package.json

 "dependencies": {
   "@nuxtjs/composition-api": "^0.20.2",
   "core-js": "2",
 }

 "devDependencies": {
   "@vue/test-utils": "^1.3.0",
   "babel-core": "^7.0.0-bridge.0",
   "babel-jest": "^28.1.0",
   "jest": "^28.1.0",
   "jest-environment-jsdom": "^28.1.0",
   "jest-junit": "^14.0.0",
   "vue-jest": "^3.0.7",
 }

nuxt.config.js

 alias: {
    'vue-demi': '@nuxtjs/composition-api',
  },

jest.config.js

module.exports = {
  verbose: true,
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['js', 'vue', 'json'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
    '^.+\\.(s?css|less)$': '<rootDir>/css_stub.js',
    '^@atoms/(.*)$':
      '<rootDir>/node_modules/UILIBRARY-path/$1',
    '^@molecules/(.*)$':
      '<rootDir>/node_modules/UILIBRARY-path/$1',
    '^@organisms/(.*)$':
      '<rootDir>/node_modules/UILIBRARY-path/$1',
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/UILIBRARY'],
  moduleDirectories: ['<rootDir>/node_modules/'],
  globals: {
    'vue-jest': {
      babelConfig: {
        configFile: './babel.config.js',
      },
    },
  },
  setupFilesAfterEnv: ['<rootDir>/test/unit/vueSetup.js'],
  collectCoverage: true,
  collectCoverageFrom: ['components/**.vue', 'pages/**.vue'],
  coverageDirectory: 'tmp/coverage',
  reporters: ['default', ['jest-junit', { outputDirectory: 'tmp/coverage' }]],
  coverageReporters: ['text', 'html', 'cobertura'],
  coverageThreshold: {
    global: {
      statements: 0,
      branches: 0,
      functions: 0,
      lines: 0,
    },
  },
}

test/vueSetp.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

///// Component and Test ////

Component.vue

export default {
  name: 'Component',
  setup() {
    const {
      store,
    } = useContext()

// when consol.log(store), it is defined

    const gettingStoreData = computed(
      () =>
        store.getters['data']?.key === 1
    )

test.spec.js

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

jest.mock('@nuxtjs/composition-api')

describe('Component.vue', () => {
  const factory = (mockDataForm) => {
    const wrapper = mount(Component, {
      propsData: {
        various data
      },
      mocks: {
        $nuxt: {
          context: {
            store: {},
          },
        },

      },
      provide: {
        form: mockDataForm
      },
    })

    return wrapper
  }

  test('component mounts properly', () => {
    const wrapper = factory({
      various data
    })

    expect(wrapper.vm).toBeTruthy()
  })

有几次尝试在全球范围内定义/模拟商店：

vueSetup.js

• 全局设置模拟商店

config.mocks.store

• 添加$nuxt到Vue.prototype

Vue.prototype.$nuxt = {
 context: {
   store: {},
 },
}

• 创建一个新的 Vue 并将 store 添加到其原型中

const newVue = new Vue({})

 newVue.prototype = (key) => key
  {
   context: {
     store: { $auth: {} },

但所有这些都会导致与标题中相同的错误：

    TypeError: Cannot destructure property 'store' of '(0 , _compositionApi.useContext)(...)' as it is undefined.

那么，为了不出现这样的情况，还可以做些什么呢？undefined并且能够正确运行测试，还可以做什么呢？

• 是否应该添加 Vuex（这听起来不太好，因为它是一个 nuxt 应用程序）
• 它实际上只与商店相关，而不与上下文相关，因为模拟$t和$tc工作正常？
• 它可以链接到组件代码本身而不是测试吗？

非常感谢您的支持，如果有任何遗漏信息或需要更多详细信息，请告诉我。

干杯，