오늘 한 일:

• vueJS 테스트코드 작성하기

VueJS 테스트

unit test란 고립된 환경에서 테스트 하는 것을 뜻함. 보통 함수 단위 테스트를 unit test로 기본으로 보지만, vue로 확장한다면 컴포넌트도 unit test대상이 될 수 있음.

Q. 테스트하기 좋은 함수 형태가 있는것처럼 테스트 하기 좋은 컴포넌트 형태는 무엇일까? 또 그것을 지향해야 할까?

UI 컴포넌트 단위 테스트

UI 컴포넌트를 테스트 할 때는 line-based coverage에 초점을 맞추고 테스트 하는 것을 추천하지 않는다. 너무 과하기도 하고 오히려 불안정한 테스트코드가 될 수 있기때문.

• line-based coverage: 코드의 각 라인(statement)을 테스트하는 커버리지

대신 컴포넌트 인터페이스에 초점을 맞추는게 좋다고 한다. props나 user event와 같은 input을 넣었을 때 올바른 output(렌더링 결과나 커스텀 이벤트 발생)을 테스트 하는 것이 올바른 예가 될 수 있음.

컴포넌트를 격리된 환경에서 테스트하려면 자식 컴포넌트의 행동을 분리 할 수 있어야 함. 이럴때 사용하는 것이 shallowMount. 더미 컴포넌트를 만들어 줄 수 있다.

Q. 한가지 flow를 테스트할 지, test 종류를 그룹화할지(렌더링 테스트, 이벤트 테스트)

props

컴포넌트 data, props의 변경이 자신을 포함한 하위 컴포넌트의 DOM 변경을 초래할 경우 beforeUpdate, updated 훅이 호출된다. 즉, 다르게 말하면 data, props 변경이 아무런 ui적 변경을 초래하지 않는경우는 호출되지 않는다.

• 호출 순서는 stack(부모 before > 자식 before > 자식 updated > 부모 updated)

(상위 컴포넌트의 변경으로인한) 하위 컴포넌트의 props 변경은 전제적인 초기화를 의미하지 않는다. 즉 data함수가 반환한 객체는 그대로 남아있다.