Jest

테스팅을 왜 해야하는가

테스트 코드는 일일이 기능을 손으로 확인하는 시간을 줄여준다.

–watchAll 옵션

too many file 에러가 발생시 braw install watchman 설치

"script": {
    "test": "vue-cli-service test:unit --watchAll",
}

테스트 코드 파일을 실행할 때 –watchAll이라는 옵션을 붙여서 테스트 코드 파일이 변화됬을때마다 다시 자동으로 테스트를 실행해주는 명령어

describe()

연관된 테스트 케이스를 그룹화하는 API

describe('그룹 이름', () => {

})

test()

하나의 테스트 케이스를 검증하는 API, 어떤 기능을 테스트할지 이름을 정의하고 테스트 코드를 넣을수 있다.

test('테스트 이름', () => {

})

expect()

기대대는 값을 예상하는 코드를 넣는다.

expect('결과값').not().tobe(예상하는 값)

not()을 활용할수도 있다.

Vuejs Unit Testing 라이브러리

vue unit test 라이브러리를 사용하지 않으면 밑에처럼 매번 인스턴스를 생성하고 코드가 길어질수있다.

import Vue from 'vue';
import LoginForm from './LoginForm.vue';

describe('LoginForm.vue', () => {
  test('컴포넌트가 마운팅되면 화면에 그려져야 하고 username 은 '' 이다', () => {
    const instance = new Vue(LoginForm).$mount();
    expect(instance.username).toBe('');
  });
});

vue unit test 라이브러리를 사용하면 밑에처럼 코드가 간결해진다.

import { shallowMount } from '@vue/test-utils';
import LoginForm from './LoginForm.vue';

describe('LoginForm.vue', () => {
  test('컴포넌트가 마운팅되면 화면에 그려져야 하고 username 은 '' 이다', () => {
    const wrapper = shallowMount(LoginForm);
    expect(wrapper.vm.username).toBe('');
  });
});