2021/10/03 : 규모가 큰 컴포넌트는 어떻게 테스트할것인가.

현재 커버리지

지금까지 코드리포트를 쓰면서, 테스터블한 컴포넌트에 대해서 작성을 했었다.

최대한 렌더링 로직만 담당하도록, 더 멍청하게 만드는 것이다.

아직 그렇게 리팩터링하지 못한 것들도 어떻게든 모킹을해서 테스트 코드를 작성해놓았다.

하지만, 위 사진의 Comment를 보자.

molecule에 있지만, 곧 organism으로 이사할 거대한 컴포넌트이다.

 

저 안에는 CommentInput, PasswordForm, SubComment, CommentOption, CommentTextBox, UserOption 들이 들어가있고, 이 중 몇개는 비동기 담당 커스텀훅을 사용한다.

 

즉, Comment를 렌더링하려면, 이 하위 항목이 사용하는 비동기 커스텀훅까지 다시 모킹해주어야 정상테스트가 가능하다.

 

....

 

그건 에바다.

그래서 규모가 큰 컴포넌트를 어떻게 테스트할 수 있을지 한참동안 고민했다.

 

하위 컴포넌트도 어쨌든 함수이므로, 컴포넌트를 모킹해보기로 했다.

하지만, 컴포넌트 자체를 빈껍데기로 모킹을 하게되면, 상위 컴포넌트에서 내려준 함수가 실행되는지 테스트할 수 없다.

(아예 html구조를 똑같이 모킹하는게 아닌이상)

그러면 실행되지 못하는 함수가 있을 것이고, 테스트코드 커버리지가 낮아질 수 밖에 없다.

 

고민하고 또 고민했다.

상위에서 함수를 내려줬을때 하위 컴포넌트에서 그 함수의 실행을 테스트할 수 있는 방법...

 

바로 모든 실행함수를 컴포넌트로부터 분리시키는 것이다.

모든 함수를 커스텀 훅으로 분리시킨다.

그러면 컴포넌트에서는 렌더링로직을 유지한채로, 커스텀훅으로 액션과 관련된 함수들을 불러올 수 있다.

그리고, 상위 컴포넌트에서는 하위 컴포넌트에서 사용하는 그 1개의 커스텀훅을 모킹하여, 모킹된 함수들을 반환시켜준다.

그러면, 상위컴포넌트가 하위컴포넌트를 그릴때 렌더링 로직을 유지한채 모든 함수를 jest.fn으로 모킹하여 함수가 호출되었는지 테스트할 수 있다.

함수 내의 함수를 테스트하려면, 함수의 구조까지 모킹을 해야하겠지만, 지금까지 내가 생각할 수 있는 가장 테스터블한 컴포넌트인것같다.미션 이제 시작해서 끝내고 늦은밤이나 내일부터 적용해봐야지.

 

+ 잠깐, 여기서 함수의 호출만 테스트하는 이유는

컴포넌트 테스트 => 함수의 실행여부등의 인터페이스만 테스트

훅 테스트 => 상태변화를 테스트

하기로 했기 때문이다.