단위 테스트 - mount 와 shallowMount

 

단위 테스트 - mount 와 shallowMount 

 

Parent.vue

<template>
  <h1>Parent</h1>
  <Child msg="ITBlue" />
</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 Parent from './Parent'

test('Mount', () => {
  const wrapper = mount(Parent)
  // Received: "<h1>Parent</h1> <div>Child: ITBlue</div>"
  expect(wrapper.html()).toBe('')
})
*/

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

test('Mount', () => {
  // shallowMount - 얕은 연결
  const wrapper = shallowMount(Parent)
  // Received: "<h1>Parent</h1> <child-stub msg=\"ITBlue\"></child-stub>
  expect(wrapper.html()).toBe('')
})

// mount - 하위의 컴포넌트 모두 연결
// shallowMount - 하위의 컴포넌트 가짜로 만들어서 연결을 하는 척만 함