Vuejs 테스트코드작성

• 
• Sugoi Ebooks(Write in English)
• Naver Cafe
• Sugoi Japanese
• Find a Job in Japan

• Vue.js 에서 테스트 코드를 작성해보자.(jest)

Vue.js 에서 테스트 코드를 작성해보자.(jest)

– 작성중 … –
Vue 는 html 화면을 구성시켜주는 프레임워크이다. 따라서 화면을 구성하는 각 컴퍼넌트들을 어떻게 테스트할지에 대해 고민하게 되는데 다행히 test-util 이라는 것을 제공해 주어 화면에 구성요소 확인, 클릭, 함수 실행 이벤트수행여부 등을 시뮬레이션하여 테스트 해 볼수 있게 해준다.

테스트 라이브러리 설치는 어렵지 않다.
먼저 javascript 테스트 프로그램인 jest 를 설치하고, jest를 vue에서 연동해서 컴퍼넌트등을 좀더 쉽게 테스트 할수 있도록 해주는 vue-jest, test-utils 를 설치하면된다.

테스트 라이브러리 설치

Vue CLI 로 Vue2나 Vue3 을 설치했다면 test 관련 모듈이 설치가 안되어있을수 있으므로 아래의 라이브러리를 추가로 설치하자.

설명

@vue/cli-plugin-unit-jest@^4.5.14 : Vue CLI에서 제공하는 Jest 플러그인입니다. 이 플러그인을 사용하면 Vue.js 프로젝트에서 Jest를 통해 유닛 테스트를 쉽게 설정하고 실행할 수 있다. 의존하는 관련 모듈인 jest가 같이 설치된다.

@vue/test-utils@1.3.6 : Vue컴퍼넌트에서 발생하는 이벤트나 데이터등을 시뮬레이션 할수 있게 도와주는 라이브러리이다.

vue와 jest 를 연동하는 라이브러리등이 버젼에 따라 vue2 또는 vue3 에 적합하도록 되어 있으므로 아래의 package.json 을 참고하여 자신의 package.json 을 수정한후 npm install 해서 라이브러리를 다시 설치하자.

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@vue/cli-plugin-unit-jest": "^4.5.14",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/test-utils": "1.3.6",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest"
  }

테스트 1

import HelloWorld from '@/components/HelloWorld.vue'
import Vue from 'vue'

let Constructor
let vm
let abc

test('HelloWorld Test', () => {
  Constructor = Vue.extend(HelloWorld)
  vm = new Constructor().$mount()
  abc = vm._data.abc
  expect(abc).toBe(100);
});