Vue.js 끝내기 No.14(테스트,Jest)

Vue에서는 테스트가 어떻게 이루어 질까?

 

테스트 환경설정

처음에 Vue Cli 도구로 프로젝트를 생성할 때,  javasscript testing을 jest로 설정해두었다.

 

jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  testMatch: [
    '<rootDir>/src/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
  ],
};

소스폴더 안에있는 테스팅 코드(*.spec.js)를 찾는 jest환경설정 파일

 

pakage.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service test:unit --watchAll",
    "lint": "vue-cli-service lint"
  },

test코드 파일이 변화되면 다시 자동으로 실행하는 --watchAll 옵션(VueCli는 기본적으로 test:unit이지만 학습을 위해 test로 바꾸어 두었다. )

 

Jest란?

자바스크립트의 테스트 라이브러리다.(최근에 가장 인기많은)

https://jestjs.io/en/

Jest · 🃏 Delightful JavaScript Testing

자 이제 간단한 테스트 코드를 작성해보자

 

LoginForm.spec.js

// jest의 테스트케이스 그룹화하는 API
describe('sum 함수 테스트 코드', () => {
  // test는 하나의 테스트 케이스를 검증하는 API
  test('10 + 20 = 30', () => {
    const result = sum(10, 20);
    expect(result).toBe(30);
  });
});

command: $ npm t

 

결과창

이렇게 나온다. sum은 밖에 어딘가에 정의한 두수의 합을 반환하는 함수입니다.

 

describe 문서

https://jestjs.io/docs/en/api#describename-fn

Jest · 🃏 Delightful JavaScript Testing

컴포넌트 테스트는 어떻게 이루어 질까?

import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import LoginForm from './LoginForm.vue';

describe('LoginForm.vue', () => {
  test('Should be painted in Display Even if Component be mounted', () => {
    const instance = new Vue(LoginForm).$mount(); // mount 방법 1
    const wrapper = shallowMount(LoginForm); // mount 방법 2 훨씬 간단
   
    expect(instance.username).toBe('');
    expect(wrapper.vm.username).toBe('');
  });
});

로그인 폼(Component)을 마운트하면 안에 username이라는 data가 정의 되어있는데 

처음 초기화 값이 빈 문자열로 셋팅 되어있는데 그걸 테스팅하는 코드이다.

 

test-utils 라이브러리도 이용해 보았다.

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

Guides | Vue Test Utils

이메일 validation 테스트

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

describe('LoginForm.vue', () => {
  test('ID는 이메일 형식이어햐 한다.', () => {
    const wrapper = shallowMount(LoginForm, {
      data() {
        return {
          username: 'test@abc.com',
        };
      },
    });
    const usernameInput = wrapper.find('#username'); // find함수 잘 보자
    console.log(usernameInput.html());
    console.log(usernameInput.element.value);
    // computed에 있는 isUsernameValid
    console.log(wrapper.vm.isUsernameValid); // 이메일 유효성 검사함수
  });
});

find함수를 이용해서 username을 찾았는데, 잘 이용되니 제대로 알아두자.

find함수 API 문서

https://vue-test-utils.vuejs.org/api/wrapper/#find

Wrapper | Vue Test Utils