[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 문법 사용시, 문법오류라고 인식하여 빨간줄이 표시됨.
package.json 에서 ESLint설정 부분에 jest 를 True 로 지정
(프로젝트마다 package.json파일이 아닌 ESLint 설정파일이 따로 있을 수 있으니, 무튼 해당 config에 입력)
후에 다루겟지만, 잠깐 문법을 살펴보자면 아래와 같다. ( 예제기준으로 1은 1이니? ㅎㅎ)
test ("테스트 설명(문자)", () => {
expect("검증항목").toBe("기대결과");
});
4. Jest 실행
npm test
위 명령어를 치면, 프로젝트 내에 모든 테스트 파일을 알아서 찾아서 실행시켜 준다.
test.js/ spec.js로 끝나거나, __test__ 폴더에 있는 파일들을 모두 jest 파일로 인식한다. (경로설정안해줘도 돼서 넘 꿀)
만약 하나만 하고싶다면, npm test 뒤에 파일명이나 경로를 입력하면 된다.
다음번에는 js파일이 아닌 vue component에 접근할 수 있는 테스트 파일을 만들어 볼 것이다.