[vue 3] 09. VTU를 통한 TODO 단위테스트

이번 포스트에서는 vitest와 VTU를 이용해 TODO 앱에 대한 단위테스트를 작성해보자.

 

Todo 단위테스트

 

Todo App

이전에 작성했던 Todo App을 대상으로 단위테스트를 처리해보자.

https://goodteacher.tistory.com/659

[Vue 3] 03.Vite 기반의 Vue 개발 2

 

테스팅

이후의 테스트들은 테스트만 첨부한다. 여러 API를 써보기 위한 목적이기 때문에 TDD등과는 거리가 멀다는 점을 참고하기 바란다. 내용은 간단하기 때문에 분석이 어렵지는 않다.

import { describe, test, expect } from 'vitest'

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

describe('App.vue test', () => {
  test('초기 로딩 시 할일에 study 하나가  완료 상태로 등록되어있다.', () => {
    const wrapper = shallowMount(App)
    const labels = wrapper.findAll('ul>li>label')
    expect(labels).toHaveLength(1)

    const checkbox = labels[0].find("[type='checkbox']")
    expect(checkbox.wrapperElement.checked).toBeTruthy()

    const span = labels[0].find('span')
    expect(span.text()).toBe('study')
  })

  test('할일을 입력하고 추가 버튼을 클릭하면 할일이 추가된다.', async () => {
    const wrapper = shallowMount(App)
    await wrapper.find('[type=text]').setValue('추가된 할일')
    await wrapper.find('button').trigger('click')

    const labels = wrapper.findAll('ul>li>label')
    expect(labels).toHaveLength(2)
    expect(labels[1].find('[type=checkbox]').wrapperElement.checked).toBeFalsy()
    expect(labels[1].find('span').text()).toBe('추가된 할일')
    expect(wrapper.find('.dash>span>span').text()).toBe('1')
  })

  test('체크박스를 해지하면 미완성 할일 목록이 1 증가한다.', async () => {
    const wrapper = shallowMount(App)
    const preRemain = parseInt(wrapper.find('.dash>span>span').text())
    await wrapper.find('[type="checkbox"]').setValue(false)
    expect(parseInt(wrapper.find('.dash>span>span').text())).toBe(preRemain + 1)
  })
})