[Vue] 컴포넌트 단위 테스트(jest) 활용

TDD(Test Driven Development)를 위해 Vue의 단위 테스트 모듈인 jest를 활용해볼 것이다.

 

구글링을 통해 각종 블로그들을 참고하여 이것저것 삽질을 많이 해봤는데, 환경설정에서 안되는 부분들이 너무 많아서 가장 쉽고 빠르게 할 수 있는 방법 두 가지를 소개한다.

 

1. 새로운 프로젝트 생성

vue create unit-testing-vue

Manully select features 클릭

이와 같이 생성하면 프로젝트에 unit-testing-vue 라는 폴더가 생성된다.

 

package.json에서 



"test" : "jest" 를 추가해주면

npm run test를 통해 폴더 안에 example.spec.js라는 테스트를 실행할 수 있다.

 

기본적으로 jest는 spec.js, test.js파일을 읽도록 설정되어있다.

 

 

2. 기존 프로젝트에 생성

--save-dev 로 jest모듈을 설치한다.

이후 package.json 에서 scripts에  "test" : jest 를 추가한다.

그러면 terminal에서 test라는 키워드로 실행할 수 있게 된다.

 

이후에 루트 디렉토리에 tests라는 폴더를 만들고 sum.js + sum.test.js 파일을 생성한다. 폴더, 파일 명은 아무거나 상관없음

 

 

//sum.js

const sum = require("./sum");

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

 

//sum.test.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;

 

이후 npm run test를 하면

테스트 결과

 

이런 식으로 콘솔에 테스트 결과가 출력된다.

이제 프로젝트에 맞게 테스트 파일을 작성하면 된다.