[Vue.js] Today I Learned - 프런트엔드 테스팅

테스팅

테스팅이란 작성한 코드가 예상한 결과가 나오는지 또는 어떠한 결과가 나오는지를 확인하는 것으로 개발 과정에 있어 매우 중요한 과정이다.

테스팅의 장점으로는

• 제품의 안정성 향상
• 기능 추가 및 수정으로 인한 부작용 감소
• 생산성 향상
• 디버깅 용이 및 반복작업 감소
• 재사용성이 좋고 깔끔한 코드 작성 가능

이 있다. 많은 장점을 가지고 있는 만큼 꼭 수행해야 하는 과정이라 생각한다.

기본 환경 구성

기본적인 테스팅을 위한 환경 구성으로

1. 테스트 파일 생성 (src/components/LoginForm.spec.js)

 

2. 터미널에서 테스트모드 실행

npm test

Jest

페이스북에서 만든 간편함에 중점을 둔 자바스크립트 테스팅 프레임워크

 

자바스크립트 테스트 파일 소개 및 파일 경로

테스트 파일은 주로 xxx.spec.js, xxx.test.js 로 작성하며 테스트 파일의 위치는 개발자마다 다른긴 하지만 주로 테스트 할 기능의 원래 컴포넌트와 같이 두거나 src/components/__test__ 경로를 사용한다.

추가적으로 프로젝트 root(/)경로에 있는 jest.config.js파일을 이용해 테스팅 환경을 설정할 수 있고 testMatch 설정을 통해 파일명이나 경로를 잡아줄 수 있다. testMatch 설정이 없을 경우 테스트 파일은 /tests 하위에 위치해야 한다.

 

기본적인 테스트 코드 작성

기본적인 sum() 함수를 구현, 사용하여 테스트 코드를 작성해보자

// src/components/math.js
export function sum(a, b) {
  return a + b;
}

// src/components/LoginForm.spec.js
import { sum } from './math';

// describe('컴포넌트 이름'): 연관된 테스트 케이스를 그룹화하는 API
describe('math.js', () => {
  // test('테스트 할 동작이나 기능'): 하나의 테스트 케이스를 검증하는 API
  test('10 + 20 = 30', () => {
    const result = sum(10, 20);
    // expect(): 결과값을 예상하는 API
    // toBe(): 기본형 비교
    expect(result).not.toBe(30);
  });
});

작성 후 npm test 명령어를 이용해 테스트를 진행하면 해당 결과가 나온다.

테스트 실패 이유는 '예상 결과(expect)와 원하는 결과(toBe)가 불일치 하다.'라고 코드를 작성했기 때문에 이러한 결과가 나타났다.

 

※ 테스트 코드 작성 시 Jest 문법에 대해서 ESLint가 오류로 인식하여 빨간 밑줄이 나타난다. 이 현상을 제거하려면 .eslintrc.js 파일 내 env 속성에 jest:true를 추가하면 해결된다.

뷰 컴포넌트 테스트

자바스크립트가 아닌 Vue.js 컴포넌트 테스트 코드 작성에 대해 알아보자.

 

로그인폼 컴포넌트 테스트

로그인폼 컴포넌트에 대해 마운팅 이후 변수 초기화에 대해 테스트 해보자.

// src/components/LoginForm.spec.js
import Vue from 'vue';
import LoginForm from './LoginForm.vue';

// 최소 그룹 단위가 컴포넌트 명 => 테스트 명을 컴포넌트 명으로 지정
describe('LoginForm.vue', () => {
  test('컴포넌트가 마운팅되면 username이 존재하고 초기 값으로 설정되어 있어야 한다.', () => {
    const instance = new Vue(LoginForm).$mount();
    expect(instance.username).toBe('');
  });
});

작성 후 npm test 명령어를 이용해 테스트를 진행하면 해당 결과가 나온다.

 

Vue Test Utils 사용하기

Vue.js에서 지원하는 공식 테스트 유틸리티 라이브러리이다. 해당 라이브러리를 사용해 조금 더 쉽게 뷰 테스팅을 할 수 있다.

// src/components/LoginForm.spec.js
// Vue Test Utils 사용
import { shallowMount } from '@vue/test-utils';
import LoginForm from './LoginForm.vue';

describe('LoginForm.vue', () => {
  test('(VTU)컴포넌트가 마운팅되면 username이 존재하고 초기 값으로 설정되어 있어야 한다.', () => {
    // shallowMount: mount와 기본적으로 동일하지만,
    // 자식 컴포넌트를 렌더링하지 않는다는 차이가 있다.
    const wrapper = shallowMount(LoginForm);
    expect(wrapper.vm.username).toBe('');
  });
});

작성 후 npm test 명령어를 이용해 테스트를 진행하면 해당 결과가 나온다.

 

로그인폼 기능 테스트

로그인폼 내의 기능 중 ID 이메일 형식 체크 기능을 테스트 해보자.

// src/components/LoginForm.spec.js
import { shallowMount } from '@vue/test-utils';
import LoginForm from './LoginForm.vue';

describe('LoginForm.vue', () => {
  test('ID는 이메일 형식이어야 한다.', () => {
    // shallowMount 함수의 2번째 인자로 컴포넌트 마운팅 시의 옵션을 지정할 수 있다.
    const wrapper = shallowMount(LoginForm, {
      data() {
        return {
          username: 'test',
        };
      },
    });
    // find(): 컴포넌트가 화면에 부착이 되었을 때 특정 HTML 요소를 찾을 수 있는 API 함수
    const idInput = wrapper.find('#username');
    console.log('인풋 박스의 값', idInput.element.value);
    console.log('이메일 형식 검사 결과', wrapper.vm.isUsernameValid);
  });
});

테스트 결과를 보면 아래와 같은 결과가 나온다.

이러한 결과가 나온 이유는 마운팅 시 옵션으로 넣어준 username 값이 이메일 형식에 맞지 않아 false가 출력되는 것을 확인할 수 있다.

 

따라서 username 값을 이메일 형식에 맞게 설정하면 true 결과값이 출력된다.

사용자 관점의 테스트 코드 작성

사용자 관점에서의 버튼 클릭, 키보드 입력과 같은 이벤트에 대해서 결과적으로 어떻게 처리되어야 하는지 코드를 검증하는 테스트를 작성해보자.

 

TestCase 1: ID가 이메일 형식이 아니면 경고 메시지가 출력된다.

// src/components/LoginForm.spec.js
import { shallowMount } from '@vue/test-utils';
import LoginForm from './LoginForm.vue';

describe('LoginForm.vue', () => {
  test('ID가 이메일 형식이 아니면 경고 메시지가 출력된다', () => {
    const wrapper = shallowMount(LoginForm, {
      data() {
        return {
          username: 'test',
        };
      },
    });
    // 경고메시지가 출력되는 태그를 찾고
    const warningText = wrapper.find('.warning');
    // 해당 요소가 존재하는지 확인하여 테스트를 진행한다.
    // 따라서 이메일 형식이 아닌 값으로 테스트가 필요하다.
    expect(warningText.exists()).toBeTruthy();
  });
});

TestCase 1 결과

 

TestCase 2: ID와 PW가 입력되지 않으면 로그인 버튼이 비활성화 된다.

// src/components/LoginForm.spec.js
import { shallowMount } from '@vue/test-utils';
import LoginForm from './LoginForm.vue';

describe('LoginForm.vue', () => {
  test('ID와 PW가 입력되지 않으면 로그인 버튼이 비활성화 된다', () => {
    const wrapper = shallowMount(LoginForm, {
      data() {
        return {
          username: '',
          password: '',
        };
      },
    });
    // btn 클래스를 가진 요소를 찾고
    const button = wrapper.find('.btn');
    // toBeTruthy(): 앞에 있는 값이 true인지 false 인지 확인하는 API 함수
    // 해당 요소가 비활성화 상태인지 확인
    expect(button.element.disabled).toBeTruthy();
  });
});

TestCase 2 결과

 

※ TestCase 2를 진행할 때 LoginForm.vue 에서 로그인 버튼에 대한 활성/비활성 처리를 해주어야 해당 테스트가 가능하다.

<!-- src/components/LoginForm.vue -->
<!-- v-bind:class 이용하여 해당 조건이 true일 경우 disabled 처리 -->
<button
  :disabled="!isUsernameValid || !password"
  type="submit"
  class="btn"
  :class="!isUsernameValid || !password ? 'disabled' : null"
>
로그인
</button>