단위테스트

단위테스트

테스트 코드는 일일이 기능을 손으로 확인하는 시작을 줄여준다.

Jest

LoginForm.spec.js 만들기

import { sum } form './math'
describe('math.js', () => {
    test('10 + 20 + 30', () => {
        const result = sum(10,20);
        expect(result).toBe(30);
        //expect(result).not.toBe(30);
    });
});

describe() : 연관된 테스트 케이스를 그룹화하는 API

test() : 하나의 테스트 케이스를 검증하는 API

expect() 결과값 기대되는 값 ?

 

실행해보기

npm t

ESlint 에서 적용하기

.eslintrc.js 에서

//..
env :{
 node : true
 jest : true //추가해주기
}
//..

뷰 컴포넌트 테스트

import { LoginForm } form './LoginForm.vue'
import Vue from 'vue';

describe('LoginForm.vue', () => {
    test('컴포넌트가 마운팅 되면 username이 존재하고 초기 값으로 설정 되어 있어야 한다. ', () => {
        const instance = new Vue(LoginForm).$mount(); 
           console.log(instance.username); // test하면 잘 보임 
        expect(instance.username).toBe('');
    });
});

인스턴스가 생성될때 엘리먼트 지정 vs 인스턴스가 생성되고 나서 엘리먼트 지정

(el )                                               (mount)

 

뷰 테스트 유틸 라이브러리

https://vue-test-utils.vuejs.org/guides/

라이브러리 가져오기

shallowMount

import { shallowMount } from '@vue/test-utils' // 플러그인 
import { LoginForm } form './LoginForm.vue'

describe('LoginForm.vue', () => {
    test('컴포넌트가 마운팅 되면 username이 존재하고 초기 값으로 설정 되어 있어야 한다. ', () => {
        const wrapper = shallowMount(LoginForm);
        expect(wrapper.vm.username).toBe('');
    });
});

shallowMount 특정 컴포넌트를 마운트 할수있음

wrapper.vm instance랑 동일

 

find

wrapper의 find() 태그 특정 html요소를 쫓아갈수있다.

css 선택자로도 가능

import { shallowMount } from '@vue/test-utils' // 플러그인 
import { LoginForm } form './LoginForm.vue'

describe('LoginForm.vue', () => {
    test('ID는 이메일 형식이여야한다.', () => {
        const wrapper = shallowMount(LoginForm, {
            data(){
                return {
                    username: 'test@abc.com',
                }
            }
        });
        const idInput = wrapper.find('#username');
         console.log(idInput.element.value); // html태그의 value값을 확인할 수 있다. 
        console.log(wrapper.vm.isUsernameValid); //true

    });
});

내가 저 username 의 값을 저장된 test@abc.com을 넣으면? console.log(wrapper.vm.isUsernameValid) 값은 true 가 된다.

compute 기능

 

사용자 관점의 테스트 코드

틀렸을때 동작하는 방법

import { shallowMount } from '@vue/test-utils' // 플러그인 
import { LoginForm } form './LoginForm.vue'

describe('LoginForm.vue', () => {
    test('ID가 이메일 형식이 아니면 경고 메세지가 출력된다.', () => {
        const wrapper = shallowMount(LoginForm, {
            data(){
                return {
                    username: 'test',
                }
            }
        });
       const wraningText = wrapper.find('.warning') 
       console.log(warningText.html()); // .warning 해당하는 html 이나옴 
        expect(wraningText.exits()).toBeTruthy();
    });
});

이벤트에 의해서 어떻게 처리해야하는지에 대한 검증하는 코드가 들어가야 한다.

test('ID와 PW가 입력되지 않으면 로그인 버튼이 비활성화 된다.', () => {
        const wrapper = shallowMount(LoginForm, {
            data(){
                return {
                    username: '',
                    password: '',
                }
            }
        });
        const button = wrapper.find('button');
        expect(button.element.disabled).toBeTruthy();
    });
});

테스트 코드가 잘 작성되었는지 확인하려면 반대값을 넣어보면 된다.