프로그래밍/Vue.js

Vue.js testing jest 사용해보기

19park 2019. 2. 14. 19:09

최근 jest로 vue 테스팅을 하게되어 간략하게나마 기록하기위해 글쓰는중..


간단한 테스팅 프로젝트 스터디를 위하여 vue cli로 스캐폴딩을 생성한다.




vue-jest 란 프로젝트를 생성하였으니, 의존 모듈을 설치한다.

* (수정) vue-jest로 만들면 내부 모듈과 이름이 같아 겹치니 vue-jest-test로 수정하여야한다..(package.json)



그럼 node_modules폴더가 생기고 아래와 같은 폴더구조가 된다.



npm run serve로 개발서버를 실행시키면 일반적인 기초 화면을 볼 수 있다.


그럼 jest를 추가하여 일반적인 저 화면의 텍스트를 테스팅 해보도록 하자...



jest, babel-jest, vue-jest, @vue/test-utils를 설치하였다.

jest 테스팅 도구이고, babel-jest와 vue-jest는 컴파일시 사용할 변환모듈로 쓰인다.

@vue/test-utils는 jest와 같이쓸 때 메소드를 지원해주는 util이다.



추가로 babel core가 필요한데

"babel-core": "^7.0.0-bridge.0",
"babel-preset-jest": "^24.1.0",

두개를 버전에 맞추어 추가로 받아준다.

** vue-cli3는 babel7이지만 현시점에서 vue-jest가 babel 7 지원이 안되는것같다..




모듈들을 설치했으니, package.json에서 test할 스크립트를 추가해준다.

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "npm run lint && npm run test:unit",
"test:unit": "jest --no-cache",
"test:unit:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --no-cache --runInBand"
},

eslint로인한 jest문법을 허용하려면 eslintConfig도 수정해준다.

> npm i -D @vue/eslint-config-standard

"eslintConfig": {
"root": true,
"env": {
"node": true,
"jest": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
],
"rules": {
"prefer-promise-reject-errors": 0,
"no-new": 0
},
"parserOptions": {
"parser": "babel-eslint"
}
},


eslintConfig 아래쪽에 jest관련 항목도 추가해준다.

"jest": {
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
},


그럼 이제 test파일을 작성해본다.



src/components에 __tests__(언더바두개씩임)폴더를 생성하고, 

테스팅할 컴포넌트(위에서는 HelloWorld.vue 가 되겠다.)와 같은 이름의 .spec.js파일을 추가해준다.

** jest로 test 스크립트를 돌리면 .spec.js를 찾아서 테스트로 실행해준다.


HelloWorld.vue파일을 보면

props로 msg를 받아 <h1>태그에 바인딩 시키는걸 볼 수 있다.


그럼 테스트로 test/utils의 shallowMount를 시킬 떄 propData로 msg를 넘겨 테스트해볼 수 있겠다.


루트 div인 .hello와 직계자식인 h1을 가르켜서 .text()메서드로 텍스트를 추출하여 jest의 toBe() 메서드로 비교할 수 있다.

// HelloWorld.spec.js

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

describe('HelloWorld.vue', () => {
test('메시지 확인해보기', () => {
const makeMsg = "안녕하세요"
const wrapper = shallowMount(Item, {
propsData: {
msg: makeMsg
}
})
expect(wrapper.find(".hello>h1").text()).toBe(makeMsg)
})
})


작성을 했으면 콘솔에서 test스크립트를 실행해본다.

> npm run test:unit



전체 1개중에 1개가 PASS 했다는 결과가 보인다.

.toBe()에 인자로 props로 넘긴 텍스트와 다른값을 넣으면 FAIL나는 결과를 볼 수 있을것이다..