当延迟加载组件时， shallowMount 的行为类似于 mount答案

【问题标题】：shallowMount behaves like mount when lazy loading a component当延迟加载组件时， shallowMount 的行为类似于 mount
【发布时间】：2023-04-07 06:36:01
【问题描述】：

我正在使用 vue-test-utils（版本 1.0.0-beta.29）测试 Nuxt 应用程序，我正在延迟加载 child 组件。测试时，我想shallowMountparent 组件来存根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>

【问题讨论】：

标签： javascript vue.js vuejs2 nuxt.js vue-test-utils

【解决方案1】：

我也遇到了同样的问题，我找到了适合我的解决方案。尝试在测试文件中导入组件并将它们添加到组件部分..

shallowMount(Component, { components: { Child })

【讨论】：

【解决方案2】：

一种解决方法是使用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>

【讨论】：