[Vue.js] 단위 테스트 - 테스트 개요 및 환경 구성

테스트 개요

테스트는 크게 Unit Test와 E2E Test로 나뉜다.

Unit Test: 데이터(상태), 함수(메소드), 컴포넌트 등의 정의된 프로그램 최소 단위들이 독립적으로 정상 동작 여부 판별.

E2E Test: End to End. 애플리케이션의 처음부터 끝까지 실제 사용자의 관점에서 사용 흐름을 테스트.

 

즉, Unit 테스트는 코드 위주의 테스트고, E2E Test는 화면 위주의 테스트이다.

테스트 환경 구성

테스트 시 사용하는 패키지

Unit Test를 위해서는 위의 그림에 적힌 것 처럼 Jest와 Vue Test Utils 패키지가 필요하다.

참조) Getting Started · Jest (jestjs.io)

Getting Started · Jest

패키지 설치

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

jest, vue test utils, vue-jest, babel-jest를 설치해준다.

구성 옵션 파일 생성

/jest.config.js 생성

moduleNameMapper

- 경로 별칭은 webpack.config.js에 작성한 경로 별칭을 의미한다.

- $1은 모든 경로를 의미함.

 

testURL

- 테스트 환경은 따로 서버를 동작시키지 않으므로 임시 루트 주소를 설정해주는 곳이다.

 

eslint 설정파일 수정

/tests/example.test.js 생성

test()를 작성해보면 전역함수임에도 불구하고 eslint에 의해서 오류가 발생한다.

/.eslintrc.js 수정

jest: true를 집어넣어 jest 환경에서의 eslint를 설정한다.

 

오류가 제거됨