javascript - shallowMount 在延迟加载组件时表现得像 mount

Question

我正在使用 vue-test-utils(版本 1.0.0-beta.29)测试 Nuxt 应用程序，并且我正在延迟加载 child 组件.测试时，我想 shallowMount parent 组件来 stub child(我不想渲染 child 组件，因为它具有依赖性)。

不是创建 child stub ，整个组件树都在 shallowMount 中呈现。如果我在没有延迟加载的情况下加载组件，shallowMount 会按预期工作。

看来问题已经在这里面对并解决了:https://github.com/vuejs/vue-test-utils/issues/959

我尝试将 { shouldProxy: true } 作为安装选项传递，或者通过传递 { stubs: ['componentname'] } 手动 stub 组件，但问题仍然存在。

父级组件:

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

子组件:

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

Answer 1

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

shallowMount(Component, { components: { Child })