Vue.js testing jest 사용해보기

최근 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나는 결과를 볼 수 있을것이다..