vue-test-utils 맛보기

이전 글이 nuxt.js환경에 Jest를 적용하는데 급급했다면, 이번에는 이전 글에서 작성했던 Greeting.spec.js에 대한 코드를 보면서 vue-test-utils 맛을 볼 예정이다.
우선 우리의 프론트엔드 코드가 Greeting.vue와 같다고 가정하자.

<template>
  <div>
    {{ greeting }}
  </div>
</template>

<script>
export default {
  name: 'Greeting',
  data() {
    return {
      greeting: 'Vue and TDD',
    }
  },
}
</script>

위 파일을 테스트 하려는 Greeting.spec.js 코드는 아래와 같은 일을 하려고 한다.
1. mount로 컴포넌트를 렌더한다.
2. 컴포넌트의 텍스트가 "Vue and TDD"를 포함하는지 확인한다.

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

describe('Greeting.vue', () => {
  it('greeting을 렌더한다', () => {
    const wrapper = mount(Greeting) // -->(1)

    expect(wrapper.html().includes('Vue and TDD')).toBe(true) // -->(2)
    expect(wrapper.text()).toMatch('Vue and TDD') // -->(3)
  })
})

여기서 두 가지 문법이 나온다.

• describe: 어떤 것을 테스트할 지에 대한 개요를 나타냄
• it: 목표하는 테스트를 수행하기 위한 책임 중 한 부분을 나타냄. 컴포넌트에 기능을 추가할수록 it블록의 수도 증가한다.

(1) mount로 컴포넌트를 렌더하는데, 일반적으로는 컴포넌트를 wrapper라는 변수에 할당한다.

Assertion

컴포넌트가 정확하게 작동하는지 확인하기 위해서는 assertion하는 것이 필요한데, Jest에서 제공하는 expect를 사용하면 된다.

• (2)의 경우, Greeting에 있는 텍스트를 비교하고자 wrapper내의 html이 'Vue and TDD'를 포함하고 있는지 여부를 확인한다.
• (3)의 경우에는 결과론적으로는 (2)와 같지만, vue-test-utils에서는 마크업인 wrapper.text를 얻는 더 좋은 방법을 제공한다.

yarn test를 실행하면 통과할 것이다!