IntelliJ Test Case Setting

안녕하세요! aloveu입니다.

오늘은 Vue에서 단위테스트 하실 때 편하게 사용하실 수 있는 IDE 세팅에 대해서 알아보겠습니다.

Vue에서 단위테스트를 하려면 vue-cli에서 제공해 주는 jest를 쓰면 되는데 기존 설치된 vue-cli에서 jest를 추가하려면 터미널에서 아래와 같은 명령어로 추가해 줍니다.

> vue.cmd add unit-jest

테스트 케이스 작성법은 jest docs(https://jestjs.io/docs/getting-started)를 참고하시면 되고요.

여기에서는 세팅을 어떻게 하는지만 알아보겠습니다.

---

| Pinia 테스트 작성법

그전에 상태관리 라이브러리로 Pinia를 쓰고 계시는 분들을 위해 추가하자면 Pinia는 따로 테스트 모듈을 추가해줘야 합니다.

npm i -D @pinia/testing

그리고 각 ComponentName.spec.ts 파일 내에서 피니아를 플러그인에 두고 테스트 코드를 작성하시면 됩니다.

import { mount } from '@vue/test-utils';
import { createTestingPinia } from '@pinia/testing';
import { useAuthStore } from '@/store/auth';

const wrapper = mount(Header, {
    global: {
        plugins: [createTestingPinia()],
    },
});
const authStore = useAuthStore();

 

| IDE 세팅

webstorm 우측 상단 Add Configuration 클릭을 합니다.

보이지 않으시면 Menu > Run > Add(or Edit) Configuration을 눌러줍니다. 

 

그러면 팝업으로 Run/Debug Configurations 모달이 뜰 텐데요.

이 창에서 좌측상단 + 클릭 > Jest를 클릭하시면 되고요.

Jest 말고 다른 test 도구를 쓰신다면 그걸로 선택해 주시면 됩니다.

그대로 Apply 해서 저장하면 에디터 우측 상단에 jest로 된 All Tests라는 이름이 설정됩니다.

 

다시 우측상단 셀렉트박스에서 All Tests를 선택된 걸 확인하시고 우측 버튼들을 눌러주시면 끝입니다.

play 버튼은 전체. test.ts,. spec.ts 파일을 jest로 돌려본다는 말이고, 방패 아이콘 앞 play 버튼은 Coverage report까지 표기해 줍니다.

Coverage까지 돌렸을 경우 IDE에서는 report와 함께 내가 작성한 test코드가 얼마나 코드를 테스트했는지에 대한 % 와 테스트가 된 line(스샷에서 초록색), 안된 line(스샷에서 빨간색)도 색상으로 표기해 줘서 테스트케이스를 작성하지 않은 코드를 쉽게 눈으로 볼 수 있습니다.

성공했을 때 하단 Run Tab에서 test 성공 여부를 확인할 수 있습니다.