Nuxt.js + Vuetify에 간단한 테스트 코드 작성해보기

환경설정도 마무리했겠다 간단하게 테스트 코드를 작성해보자.

이미 배포 준비를 하고 있지만 테스트 코드가 없는 프로젝트에서 그나마 만만해 보이는게 로그인 페이지라 로그인 페이지에서 테스트 코드를 작성하기로 했다.

프로젝트의 로그인 페이지는 아래와 같이 생겼다.(보안 상 페이지를 캡쳐할 수는 없어 이렇게 간단하게 도식화 해 보았다.)

login.vue 코드를 간단하게 하면 아래와 같다.

<template>
  <v-container>
    <v-card class="pa-0 ma-auto rounded-lg" width="1000">
      <v-form ref="form" class="text-center">
        <div class="pt-10 ma-0 pt-10">
          <p>USER LOGIN</p>
          <p id="inactive_text" v-if="isLoginLock">
            비활성화된 계정입니다. 활성화해주세요.
          </p>
          <a id="inactive_link" v-if="isLoginLock" href="/activeLogin">
            계정 활성화
          </a>
        </div>
        <v-text-field v-model="email" label="이메일" />
        <v-text-field v-model="password" label="비밀번호" />
        <v-btn type="submit">로그인</v-btn>
        <v-btn id="new" to="new"> 사용자등록 </v-btn>
        <v-btn> 이메일 찾기 </v-btn>
        <v-btn id="findPw" to="findPw"> 비밀번호 찾기 </v-btn>
      </v-form>
    </v-card>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      isLoginLock: false,
      email: "",
      password: "",
    };
  },
  methods: {
    async login() {
      /** */
    },
  },
};
</script>

비활성화 계정이 로그인 시도 시

이메일과 비밀번호를 입력하고 로그인을 시도했을 때, 즉 isLoginLock이 true인 사용자가 로그인을 시도했을 때, Login.vue에는 아래와 같은 활성화 요구 문구와 함께 /activateLogin으로의 링크가 표시되어야 한다.

이 부분에 대한 테스트 코드를 작성해보겠다. 이전 글에서 작성해 둔 부분이지만 일단 다시 짚고 넘어가자.

import Login from '경로'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import Vuex from 'vuex'

import { createLocalVue, mount } from '@vue/test-utils'

describe('Login.vue', () => {
	const localVue = createLocalVue()
    localVue.use(VueRouter)
    localVue.use(Vuex)
    const router = new VueRouter()
    
    let vuetify()
    let wrapper()
    
    beforeEach(() => {
    	vuetify = new Vuetify()
        wrapper = mount(Login, { localVue, vuetify, router })
    })
})

createLocalVue

테스트에서 사용할 로컬 Vue 클래스를 반환하다. 전역 Vue 클래스를 오염시키지 않고 믹스인, 플러그인 등을 추가할 때 사용할 수 있는 일종의 가짜 Vue 객체라고 한다.
예를 들어 컴포넌트에서 VueRouter나 Vuex(Store)등을 사용하고 있다면, 위 코드처럼 연결할 수 있다. 핵심은 테스트에서 Vue 컴포넌트가 동작할 수 있는 환경을 만드는 것이다.

Hooks

Jest는 beforeAll, afterAll, beforeEach, afterEach의 4가지 전역 함수를 제공한다.
그 중에서, 나는 beforeEach를 사용하였으며, 선언된 describe 범위 안에서 각 test 단위 전에 동작한다.

it('비활성화 유저 로그인 테스트', async () => {
	const isLoginLock = true
    const email = '비활성화 계정 이메일'
    const password = '비활성화 계정 비밀번호'
    
    wrapper.setData({
    	isLoginLock: isLoginLock,
        email: email,
        password: password
    })
    
    await wrapper.vm.$nextTick()
    expect(wrapper.find('#inactive_text').text()).toBe('비활성화된 계정입니다.')
    
    await wrapper.find('#inactive_link').trigger('click')
    await wrapper.vm.$nextTick()
    expect(wrapper.vm.$route.path).toBe('/activateLogin')
})

우선, 비활성화 상태를 의미하는 true값을 isLoginLock에 넣어 props data로 wrapper에 넘겨준다.

$nextTick

그리고나서 $nextTick()을 호출한다. Vue는 DOM 업데이트를 비동기로 하기에, Data가 업데이트 되고 난 직후 UI가 갱신될 때 Vue가 DOM을 찾지 못하는 경우가 발생할 수 있고, 이를 해결하기 위해 $nextTick을 사용한다고 한다.

$nextTick을 실행한 후, wrapper에서 '비활성화된 계정입니다'라는 문구가 표시되는지 여부를 확인한다.
나의 경우에는 wrapper 상에서 'inactive_text'라는 id를 가진 요소를 찾아, 그 요소의 text가 '비활성화된 계정입니다'와 일치하는지 확인하는 방식으로 테스트 코드를 작성하였다.

그리고 나서 활성화 링크를 클릭하게 한다. trigger를 활용하여 비동기적으로 이벤트를 실행할 수 있다. 클릭한 후 wrapper의 router path가 /activateLogin 인지 확인하면 '비활성화 계정의 로그인 시도'에 대한 vue 테스트 코드 작성이 끝난다.