选项中shallowMount和stub之间有什么区别

时间:2019-04-05 08:15:51

标签: javascript vuejs2 vue-test-utils

shallowMountstubs之间有什么直接区别?

例如,在以下代码中,

// ParentComponent.vue
<template>
<div>
  <Child/>
</div>
</template>
<script>
import Child from '@/components/ChildComponent.vue'

export default {
  components: { Child }
}
</script>

// ChildComponent.vue
<template>
<div></div>
</template>
<script>
export default {
  mounted() {
    console.log('The Child component is mounted')
  }
}
</script>
// test.spec.js
import { mount, shallowMount } from '@vue/test-utils'
import Parent from '@/components/ParentComponent.vue'
import Child from '@/components/ChildComponent.vue'

it('shallowMount test', () => {
  const wrapper = shallowMount(Parent)

  // do not show console.log of Child
  expect(wrapper.find(Child).exists()).toBe(true)
})

it('stubs test', () => {
  const wrapper = mount(Parent, {
    stubs: {
      Child: true
    }
  })

  // also do not show the console.log of Child !!
  expect(wrapper.find(Child).exists()).toBe(true)
})

在上述测试中,两个都安装了 Parent ,但没有安装整个 Child 组件(两个测试都没有显示The Child component is mounted之类的Child的console.log)

有什么区别,当我使用shallowMount或安装选项的存根。

0 个答案:

没有答案