[Vue] Vue 프로젝트 단위테스트 with Jest

in JS Technology on Vue.js
[Vue] Vue 프로젝트 단위테스트 with Jest

Vue에서 단위테스트를 도입해보고 테스트 코드의 경로와 설치방법에대해 알아본다.

1. 개요

단위테스트를 하기에 앞서 Jest가 무엇인지 단위테스트가 무엇인지 알아보고 Vue 프로젝트에서 단위테스트를 설치해보겠습니다.

2. 단위테스트

단위테스트는 유닛테스트(unit test) 라고 불리우며 컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도한 대로 정확히 작동하는지 검증하는 절차입니다. 단위테스트 모듈에는 JAVA 에는 Junit, Javascript 에는 Jest 가 대표적인 모듈입니다.

javascript 에서 자주 사용되는 테스트 모듈은 Mocha, Chai, Jest가 대표적입니다.

3. Jest

제스트(Jest)는 페이스북에서 만든 자바스크립트 테스팅 라이브러리입니다. 테스트 코드의 모양이 직관적이고 문서화가 잘되어 있어 요즘 많이 활용되고 있습니다.

제스트 공식 site

4. Vue 프로젝트에 Jest 도입

Vue에 Jest 설정을 하나하나 할 필요는 없습니다. Vue-cli 가 설치되어 있다면 프로젝트 생성 시 Testing 항목을 선택하여 jest를 선택하시면 설치가 됩니다. 하지만 기존 Vue에 Jest 를 도입하고 싶으신 분들은 터미널을 열어 다음 명령어를 입력해 주세요

   $ vue add unit-jest

해당 내용은 아래의 링크에 있습니다.

Vue Cli site

5. Vue의 Jest 테스트코드 파일 소개 및 경로

Vue Cli 로 Jest를 추가하셨다면 경로는 Vue cli 폴더가 자동적으로 설정해 주었을 것 입니다 그 설정 방법은 2가지 인데 이를 살펴 보겠습니다.

경로와 확장자는 다음과 같습니다.

  • <rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)
  • **/tests/*.(js|jsx|ts|tsx)

위의 설명이 복잡하신가요 ?

1번째 방법부터 찬찬히 살펴보겠습니다. package.json 이 존재하는 경로가 rootDir 이라고 치면

/tests/unit/[모든경로]/[모든파일명].spec.js

이러한 형태입니다. 풀어말하면 tests/unit 하위 모든 경로에서 끝에 .spec.js 로 끝나는 파일명들은 테스트 파일로 인식 한다는 뜻 입니다.

2번째 방법은 tests 폴더안에 있는 js 파일은 모두 테스트 파일로 인식합니다. 이는 개발자 취향에 따라 취사 선택 하시면 되겠습니다.

jest 경로

이 경로를 바꾸려면 어떻게 해야할까요?

바로 jest.config.js 에 testMatch 부분을 수정하시면 됩니다.

testMatch : [
    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
]

jest 경로

6. Vue의 Jest 실행

// file: "package.json" 
// ...생략
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },

package.json 파일 scripts 부분을 보시면 test:unit 이라는 키값이 보이실 겁니다. 터미널을 열어 아래의 명령어를 입력하세요

    $ npm run test:unit

jest 경로

터미널에 위와같이 결과가 나오면 Test 성공입니다.

7. 정리

Vue 에서 Jest를 설치하는 법을 알아보고 Jest Test파일의 경로와 확장자 설정 방법에 대해서도 살펴 보았습니다. Vue에서 Jest작성법에 대해서는 계속 학습하면서 정리하여 글을 쓸 예정입니다.

© 2021. All rights reserved.