mount vs shallowMount

단위 테스트는 최대한 가볍게 진행해야 하므로 얕은 마운트를 의미하는 shallowmount를 사용하기를 권장한다.

 

Parent.vue

<template>
  <h1>Parent</h1>
  <Child msg="Happy" />
</template>

<script>
import Child from './Child'
export default {
  components: {
    Child  
  }
}
</script>

Child.vue

<template>
  <div>Child: {{ msg }}</div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
}
</script>

Parent.test.js

import {mount} from '@vue/test-utils'
import {shallowMount} from '@vue/test-utils'
import Parent from './Parent'

test('Mount', () => {
  const wrapper = mount(Parent)
  expect(wrapper.html()).toBe('')
})

test('shallowMount', () => {
  const wrapper = shallowMount(Parent)
  expect(wrapper.html()).toBe('')
})

 

 

shallowMount를 사용한 결과는 child 태그 뒤에 stub가 붙어서 나온다.

mock, stub는 가짜, 모의를 의미한다.

 

mount

연결하는 특정 컴포넌트에 하위에 연결된 컴포넌트또한 랜더링 실행,

테스트가 무거워지는 문제점이 생긴다.

 

shallowmount

연결하는 특정 컴포넌트만 랜더링 실행,

하위에 컴포넌트는 stub를 붙여서 가짜로 연결이 된것처럼 보여준다.