Question

我有以下问题，我想测试vuejs中的一个组件，该组件扩展了像这样的另一个组件：

<template>
 <div></div>
</template>

<script>

   import MySuperComponent from '@/project/MySuperComponent'

   export default {
    extends: MySuperComponent,
    name: myComponent,
    components: {
    }
</script>

我的测试看起来像这样：

import {createLocalVue, shallowMount, mount} from '@vue/test-utils'

// Component to test
import myComponent from '@/project/myComponent.vue'
// import store
import Vuex        from 'vuex'
// LIB
import VueI18n     from "vue-i18n"

describe(`myComponent.vue`, () => {
  const localVue = createLocalVue()
  let i18n, store, getters, state, mutations, actions

  beforeAll(() => {
  localVue.use(Vuex)

  getters = {
    mygetters: jest.fn()
  }
  state = {
  getNames: jest.fn(),
 }
mutations = {}
actions = {}
store = new Vuex.Store({
  getters, state, mutations, actions
})
localVue.use(VueI18n)
i18n = new VueI18n({
  silentTranslationWarn: true
})
})

it(`Test default mounted myComponent ok`, () => {
const wrapper = mount(myComponent, {
  propsData: {
    component       : 'mycompnent',
    json            : {},
    animationEnabled: true
  },
  computed: {
    getNames   : jest.fn(),
  },
  watch: {
    ageUser   : jest.fn(),
  },

  i18n,
  localVue,
  store
})
expect(wrapper.exists()).toBeTruthy()
})
})

问题是，即使我的组件为空，我也需要设置扩展组件的所有道具和所有计算出的...。我尝试使用jest.mock（MySuperComponent），但没有任何效果，我的目标只是为了测试组件内部的内容

如何模拟扩展组件vue.js

0 个答案: