Vue:如何测试动态组件导入?

时间:2020-01-31 21:13:37

标签: javascript vue.js vuejs2 jestjs

我有一个简单的Vue SFC,它可以为组件提供prop值。

<template>
  <component :is="component" v-bind="stepProps" />
</template>

<script>
import { _ } from 'core'

export default {
  name: 'SetupFlow',
  props: {
    type: {
      type: String,
      required: true
    },
    step: {
      type: String,
      required: true
    },
    stepProps: Object
  },
  computed: {
    component () {
      const camelCaseName = _.camelCase(this.step)
      const name = camelCaseName.charAt(0).toUpperCase() + camelCaseName.slice(1)

      return () => import(`@/components/ProfileSetup/GMB/${name}`)
    }
  }
}
</script>

在我的测试中,我只需要确保正在渲染导入的组件。到目前为止,这是我的测试文件:

import { createLocalVue, shallowMount } from '@vue/test-utils'
import SetupFlow from '@/components/ProfileSetup/SetupFlow'

const localVue = createLocalVue()

describe('SetupFlow.vue', () => {
  let propsData
  let stubs

  beforeEach(() => {
    propsData = {
      type: 'GMB',
      step: 'step-example' // this file does not exist, so I need to mock `import`
    }
  })

  it('renders the given step component', async () => {
    const wrapper = shallowMount(SetupFlow, { localVue, propsData })
  })
})

这是运行测试时遇到的错误: Test error

有什么想法可以模拟import以便step-example返回模拟vue组件吗?

0 个答案:

没有答案