본문 바로가기
C++ 200제/코딩 IT 정보

Vue.js : Mocha 플러그인 활용한 테스트 (yarn vue/cli)

by vicddory 2019. 11. 22.

1. Mocha 플러그인을 활용한 테스트

Vue CLI를 이용해 새로운 프로젝트를 생성할 때 기본 프리셋(Default Preset)을 사용합니다. 하지만 vue.js 기본 프리셋에는 단위 테스트 기능이 포함되어 있지 않습니다. 기본 프리셋이 아닌 수동 설정(Manually select features)을 선택하면 설치 과정 중에서 단위 테스트 관련 기능을 설치하도록 설정할 수 있습니다.


단위 테스트 기능을 확인하기 위한 프로젝트를 vue create test1 명령어로 test1 프로젝트를 생성합니다. 기본 프리셋 대신에 수동설정을 선택하고 vue.js 테스트 솔루션은 Mocha + Chai로 선택하겠습니다. 나머지 설정은 기본값으로 진행합니다.

만약 vue cli 설치 전이라면 아래처럼 터미널에 명령어를 입력하여 vue/cli를 먼저 설치합니다.


npm install -g @vue/cli




이어서 프로젝트를 생성합니다.


vue create test1




이다음 Mocha + Chai를 체크하여 테스트 솔루션 선택을 마칩니다.


관련 패키지 설치가 완료되고 나면 yarn serve 명령어로 정상 작동 여부를 확인해봅니다. 정상 작동 여부가 확인되었다면 CTRL+C를 눌러서 vue.js 웹팩 개발 서버 실행을 중단합니다.


vue 단위 테스트 : mocha + chaivue 단위 테스트 : mocha + chai



만약 yarn 설치 전이라면 아래처럼 yarn을 설치하고 위 화면을 확인하세요.


npm install -g yarn


2. 기본 기능 테스트

이제 테스트를 수행하는 기본적인 방법부터 알아보도록 하겠습니다. 테스트를 위해 sum.js 파일과 이것을 테스트하는 파일을 작성해봅니다. 프로젝트 내부에 여러 디렉터리가 있지만 그중에서 컴포넌트를 작성하고 테스트하기 위해 src, test 디렉터리에서만 코드를 작성하고 검토하면 됩니다.


src / sum.js


let sum = (a, b)=> {
return a + b;
}

export default sum;


이제 sum.js를 테스트하는 코드를 작성해봅니다. test/unit 디렉터리에 작성해보도록 하겠습니다.



test/unit/sum.spec.js


import { expect } from 'chai'
import sum from '@/sum';

describe ('sum', ()=> {
it ('add 2+3 equals 5', ()=> {
expect(sum(2, 3)).to.equal(5);
})
})


sum.spec.js 파일 2행의 @는 src 디렉터리를 의미합니다. 1행에서는 chai 어썰션(assertion) 라이브러리에서 expect 함수를 참조한 후 5행에서 사용합니다. sum 함수의 실행 결과가 5일 경우 테스트 성공입니다.


만약 vue.js test 결과가 실패라면 아래처럼 에러 메시지를 확인할 수 있습니다.


vue 단위 테스트 : mocha + chaivue 단위 테스트 : mocha + chai


이제 yarn test:unit 명령으로 테스트를 수행해보도록 하겠습니다. test:unit 스크립트에 대한 내용은 package.json 파일을 확인해보면 vue-cli-service를 이용해 단위 테스트를 수행함을 알 수 있습니다.






이미 HelloWorld.vue 컴포넌트에 대한 테스트 코드인 HelloWorld.spec.js 파일이 이미 존재하기 때문에 두 결과가 함께 나타날 것입니다. vue.js 프로젝트의 HelloWorld.spec.js 파일도 함께 살펴보도록 하겠습니다.


test/unit/HelloWrold.spec.js


import { expect } from 'chai'

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', ()=> {
it ('renders props.msg when passed', ()=> {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.find('div.hello h1').text()).to.equal(msg)
})
})


5행의 describe 함수는 관련된 테스트를 묶어 테스트 블록을 테스트 스위트(Test suite) 형태로 생성합니다. 6행의 it 함수는 test 함수의 별칭(alias)이며, test 함수는 실질적인 테스트 기능을 수행하는 함수입니다. 이 내부에는 테스트 이름과 기대하는 테스트 값을 포함합니다.


8행에서 @vue/test-utils 패키지가 제공하는 ShallowMount 함수를 이용해 HelloWorld 컴포넌트에 속성(props)으로 msg 값을 전달하여 마운트합니다. 12행에서 HelloWorld 컴포넌트 인스턴스의 요소 div 태그이면서 class가 hello인 요소의 자식 주 h1 요소의 텍스트 콘텐트 값을 알아내어 9행에서 전달한 속성이 msg 변수값과 일치하는지 비교합니다.


src/components/HelloWorld.vue 파일을 열어보면 아래와 같은 부분에서 3행의 h1 태그 내부의 콘텐트 문자열이 예상값과 일치하는지 비교하는 것입니다.


Vue CLI에서 자동 생성한 vue.js 코드는 11행의 주석 처리된 코드입니다. text() 메서드는 HTML 태그를 제외한 문자열만 추출합니다. 그 후 속성으로 전달한 msg 변수값의 문자열을 포함하고 있는지 여부를 확인합니다.

3. 스위트와 마운트

테스트 스위트(test suite)란?

테스트 스위트는 테스트 케이스(여기서 이것은 하나의 메소드를 테스트하기 위한 테스트 메소드를 의미)들을 하나로 묶은 것입니다. 그리고 그것은 자신의 테스트 케이스들을 실행합니다.


테스트 스위트로 할 수 있는 일

테스트 스위트를 정의하면, 특정한 클래스나 특정한 메소드들을 선택하여 단위 테스트를 할 수 있습니다. 특히, 후자를 원하는 경우에 테스트 스위트가 유용합니다.


shallowMount 함수와 mount 함수

shallowMount, mount 함수는 @vue/test-utils 패키지에서 지원하는 함수입니다. 두 함수 모두 마운트되고 렌더링된 Vue 컴포넌트를 포함하는 Wrapper 객체를 생성하여 리턴합니다. mount()는 전체 Vue 컴포넌트 트리, 즉 자식 컴포넌트까지 포함하여 모두 렌더링하지만 shalowMount()는 자식 컴포넌트를 렌더링하지 않고 직접 마운트된 컴포넌트만 렌더링한다는 차이점이 있습니다.


컴포넌트를 테스트할 때 자식 컴포넌트 트리가 아닌 현행 컴포넌트만 테스트해야 할 경우가 있으며, 이런 경우에 shallowMount() 함수를 사용합니다.


vue 단위 테스트 : mocha + chaivue 단위 테스트 : mocha + chai


출처 : 원형섭 Vue.js 퀵 스타트 http://www.yes24.com/Product/Goods/45091747


관련 글

타입스크립트: Mocha 플러그인 활용한 테스트

TypeScript 7031 바인딩 요소 '인자' 암시적으로 any 형식이 있습니다

TypeScript 강의 3. 자바스크립트 버전과 ECMAScript

댓글