shallowMount和stubs之间有什么直接区别?
例如,在以下代码中,
// 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或安装选项的存根。