Vue: 동적 컴포넌트 Import 테스트 방법

Vue: 동적 컴포넌트 Import 테스트 방법

이 심플한 Vue SFC는 프로펠러 값이 지정된 컴포넌트를 렌더링합니다.

<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된 컴포넌트가 렌더링되고 있는지 확인만 하면 됩니다.지금까지의 테스트 파일은 다음과 같습니다.

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 })
  })
})

에러는 테스트 시 하는 에러입니다.

방법 생각 없어?import 해서step-example의 vue 컴 환 환 환 、 하? ?? ? ???

언급URL : https://stackoverflow.com/questions/60011303/vue-how-to-test-dynamic-components-import