구성 요소를 게으르게 로드할 때 얕은 마운트가 마운트처럼 작동함

구성 요소를 게으르게 로드할 때 얕은 마운트가 마운트처럼 작동함

나는 Nuxt 앱을 테스트하고 있다.vue-test-utils(버전 1.0.0-베타.29) 그리고 나는 로딩을 게을리 한다.child구성 요소테스트할 때shallowMount그parent스텁 구성 요소childs (나는 그것을 렌더링하고 싶지 않다.child종속성 때문에 구성 요소).

만드는 대신child스텁, 전체 구성 요소 트리가 에서 렌더링됨shallowMount.부품을 게으르게 적재하지 않고 적재할 경우,shallowMount예상대로 되다

이 문제는 이미 여기서 직면하고 해결된 것 같다: https://github.com/vuejs/vue-test-utils/issues/959

나는 통과하려고 노력했다.{ shouldProxy: true }장착 옵션으로 또는 구성 요소를 통과하여 수동으로 스텁{ stubs: ['componentname'] }그러나 문제는 여전히 일어나고 있다.

parent구성 요소:

<template>
  <div id="wrapper">
    <div 
      v-for="item in markets"
      class="item-wrapper">
      <Child :market="item"/>
    </div>
  </div>
</template>

<script>
export default {
  components: {
    Child: () => import('./TimelineItem.vue')
  },
  props: {
    markets: {
      type: Array,
      default: () => []
    }
  }
}
</script>

child구성 요소:

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

<script>

export default {
  props: {
    market: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

스냅샷:

<div id="wrapper">
  <div class="item-wrapper">
    <div>Child</div>
  </div>
  <div class="item-wrapper">
    <div>Child</div>
  </div>
</div>

나는 다음과 같은 스냅숏을 가질 것으로 기대했다.

<div id="wrapper">
  <div class="item-wrapper">
    <child-stub></child-stub>
  </div>
  <div class="item-wrapper">
    <child-stub></child-stub>
  </div>
</div>

나도 같은 문제가 있었고 나에게 맞는 해결 방법을 찾았어.테스트 파일의 구성 요소를 가져와서 구성 요소 섹션에 추가해 보십시오.

shallowMount(Component, { components: { Child })

해결책은 a를 사용하는 것일 수 있다.dynamic component.

<div v-if='!Child'>Loading...</div>
<component v-if='Child' :is='Child' />

<script>

export default {
  data: {
    Child:null,
  },
  created(){
     import('./TimelineItem.vue').then(it=>this.Child=it);
  }
}
</script>

참조URL: https://stackoverflow.com/questions/57114318/shallowmount-behaves-like-mount-when-lazy-loading-a-component