단위 테스트 - VTU 테스트 및 API

 

VTU (Vue Test Utils)

 

- Vue.js 환경에서 단위 테스트를 하기 위한 공식 라이브러리

 

예제

 

Example.vue

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

<script>
export default {
  data() {
    return {
      msg: 'Hello Vue test utils!'
    }
  }
}
</script>

 

example.test.js

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

test('메시지를 변경', async () => {
  const wrapper = mount(Example)
  // wrapper.vm === this
  expect(wrapper.vm.msg).toBe('Hello Vue test utils!')
  // wrapper.vm.msg = 'Hello ITBlue!' - 반응성 유지X
  // 반응성을 유지하려면 setData() 사용
  await wrapper.setData({
    msg: 'Hello ITBlue!'
  })
  expect(wrapper.vm.msg).toBe('Hello ITBlue!')
  expect(wrapper.find('div').text()).toBe('Hello ITBlue!')
})

 

결과

 

---

 

참고

https://next.vue-test-utils.vuejs.org/guide/

Getting Started | Vue Test Utils for Vue 3 (2.0.0-rc.14)

 

https://next.vue-test-utils.vuejs.org/api/

API Reference | Vue Test Utils for Vue 3 (2.0.0-rc.14)