[Vue Test Utils] Vue 테스트 코드 작성 방법1️⃣- 테스트 환경 설정 및 간단한 테스트 코드 작성 방법

개요

프로그램은 테스트가 가능하게 개발되어야 합니다. 프로그램이 개발만 되고, 자신이 작성한 코드 기능을 증명할 수 없다면 완전이 개발된 프로그램이 아닙니다. 제가 담당하는 제품은 테스트 코드가 전혀 작성되지 않았습니다. 이제서야 테스트 코드를 작성하기 시작하려고 하고 있습니다. 팀에 테스트 코드를 작성하는 문화?가 없고, 개발만 하기 때문에 이번 이 글을 통해서 웹 테스트 코드를 작성하는 방법을 공유해보려고 합니다.

 

목표는 올 해 안에 테스트 커버리지 80%를 달성하는 것입니다.

 

사용 라이브러리

제품이 vue 2 로 개발되어 있습니다.

라이브러리	설명
jest@27.0.6
vue-jest@3.0.7	Vue 파일을 Jest가 실행할 수 있는 자바스크립트로 컴파일을 합니다.
@vue/test-utils@1.2.2	Vue 팀 및 오픈 소스 커뮤니티로 부터 제공되는 공식 테스트 유틸리티 라이브러리
babel-jest@27.0.6	JS/JXS파일을 Jest가 실행할 수 있는 자바스크립트로 컴파일합니다.
babel-core

참고 : Vue 테스팅 핸드북

 

Vue 프레임워크 제품 테스트 코드 작성

-  정말로 잘 작동하는지 확인하려면, 항상 테스트를 실패하는 케이스를 작성하고, 다음으로 통과하는 케이스를 작성하는 게 순서라고 합니다.

- vue test utils는 개발한 컴포넌트들을 테스트 코드로 mount하는 용도로 주로 사용합니다.

- jest는 assertion을 작성하고 실제 테스크 코드를 실행하는데 사용합니다.

assertion(어설션)작성

// jest에서 제공하는 api
expect(1).toBe(1)      // true를 예측
expect(1).not.toBe(1)  // false를 예측

toBe()같은 메소드 형식을 matcher라고 합니다. vue-test-utils는 어떤 matchers도 제공하지 않습니다. Jest가 제공하는 matchers를 테스트에 사용합니다. Jest metchers

 

사용방법

vue 프레임워크 웹 테스트 시작 방법

1. 설치

$ npm i -D jest
$ npm i -D @vue/test-utils
$ npm i -D babel-jest vue-jest

2. Jest 설정

프로젝트 홈 경로/package.json

{
    "name": "rms-fe",
    "jest": {               // 👈 여기부터
        "verbose": true,
        "moduleFileExtensions": [
            "js",
            "vue"
        ],
        "transform": {
            "^.+\\.js$": "babel-jest",
            ".*\\.(vue)$": "vue-jest"
        },
        "": {
            "^@/(.*)$": "<rootDir>/src/$1"  // 👈 alias '@'
        },
        "setupFilesAfterEnv": [
            "<rootDir>/jest-setup.js"
        ]
    },                     // 👈 여기까지
    "version": "0.1.0",
    "private": true,
    // ...
    "script": {
       // ...
       "test": jest --watch  // 👈 jest 테스트 코드 실행
    }
 }

3. 테스트 코드 작성

// 📄what.test.js
/*

*/

descript("테스트 타이틀 작성1", () => {
  it("테스트 설명", () => {
     // 테스트 코드 작성
     expect("반환 값(테스트할 값)").toBe("예측 값")
  })
  it("테스트 설명", () => {
     // 테스트 코드 작성
     expect("반환 값(테스트할 값)").toBe("예측 값")
  })
  // ...
})

descript("테스트 타이틀 작성2", () => {
  it("테스트 설명", () => {
     // 테스트 코드 작성
     expect("반환 값(테스트할 값)").toBe("예측 값")
  })
  it.skip("테스트 설명", () => { //👈 테스트 스킵함.
     // 테스트 코드 작성
     expect("반환 값(테스트할 값)").toBe("예측 값")
  })
  // ...
})

 

4. jest 실행

package.json에서 설정한 script 명령어를 터미널 프로젝트 홈 경로에서 실행합니다.

$ npm test