[Vue] Jest 환경설정

기존 Vue 프로젝트에 Jest로 테스트 환경을 구성했다.

매일 npm run serve 로 로컬에 서버 구동하고, 직접실행해서 콘솔이나 네트워크에서 output값을 확인했는데,

하면서도 참 비효율적이다 생각했다.

(Jest말고 2022년에는 Vitest가 1등...https://2022.stateofjs.com/en-US/libraries/testing/ 할거너무많네..)

 

vue project create할 때, jest를 선택하여 미리 환경을 구성할수도 있지만,

나는 이미 있는 프로젝트에 설치해야하는 경우였다.

---

1. Jest Module Install

*Jest 공식 URL - https://jestjs.io/docs/getting-started

npm i -D jest

 

2. package.json 파일 수정

Script 영역에 "test" : "jest" 로 지정

3. ESlint 설정

ESLint 문법검사기를 사용중이라면, test 파일에서 jest 문법 사용시, 문법오류라고 인식하여 빨간줄이 표시됨.

ESLint 오류

package.json 에서 ESLint설정 부분에 jest 를 True 로 지정

(프로젝트마다 package.json파일이 아닌 ESLint 설정파일이 따로 있을 수 있으니, 무튼 해당 config에 입력)

ESLint config 에 jest 설정

ESLint 오류 사라짐

후에 다루겟지만, 잠깐 문법을 살펴보자면 아래와 같다. ( 예제기준으로 1은 1이니? ㅎㅎ)

test ("테스트 설명(문자)", () => {
	expect("검증항목").toBe("기대결과");
});

4. Jest 실행

npm test

위 명령어를 치면, 프로젝트 내에 모든 테스트 파일을 알아서 찾아서 실행시켜 준다.

test.js/ spec.js로 끝나거나, __test__ 폴더에 있는 파일들을 모두 jest 파일로 인식한다. (경로설정안해줘도 돼서 넘 꿀)

만약 하나만 하고싶다면, npm test 뒤에 파일명이나 경로를 입력하면 된다.

npm test 결과

 

 

다음번에는 js파일이 아닌 vue component에 접근할 수 있는 테스트 파일을 만들어 볼 것이다.