[HW3] Asynchronous component의 test 관련 질문

[yankee624]

컴포넌트 내에
this.props.onGetArticles().then(
() => { http request를 통해 article을 받은 후 실행할 코드 }
)

와 같이 asynchronous한 부분이 있을 경우
그 내부에 있는 코드의 test를 어떤 식으로 하는 것이 바람직한지 궁금합니다.

참고로, 현재 제가 선택한 방법은 다음과 같습니다.
먼저 onGetArticles()에 해당하는 부분을 promise를 리턴하는 함수로 mocking합니다.
컴포넌트의 멤버변수로 x를 두고,
asynchronous한 부분을 x = this.props.onGetArticles().then( ... ) 로 바꾼 후,
테스트 코드에서 await componentInstance.x 를 하고 있습니다.
그런데 이러한 방법은 컴포넌트 내의 asynchronous한 부분마다 멤버변수를 하나씩 할당해야 한다는 점에서
좀 지저분해보입니다.

[Algy]

테스트만을 위한 hatch를 source code에 넣는 것은 코드 디자인 측면에서 별로 좋지 않아 보입니다. { http request를 통해 article을 받은 후 실행할 코드 }의 side effect를 간접적으로 (e.g. component state, rendered DOM change) assert 하거나, then 구절 안쪽을 mocking할 수 있도록 수정하면 좋겠습니다.

[yankee624]

@Algy

1. side effect를 간접적으로 assert한다는 말은, {request 후 코드}에서 바뀌는 component state 등을 assert하라는 말씀이신가요?
   그렇게 하려면 어쨌든 제가 말씀드린대로 새로운 멤버변수를 둬서, test코드에서 그것을 explicit하게 await해야 하는 것으로 보입니다.. 그래야 {request 후 코드} 가 실행될 수가 있기 때문입니다.

2. then 구절 안쪽을 mocking하는 것은 어떻게 하는 것을 말씀하시는건가요?

[Algy]

1. 이 링크의 flushPromises를 살펴보시는 것을 추천합니다. 간단히 pending된 모든 then 구절이 모두 실행된 뒤 불리는 콜백을 등록할 수 있습니다. setTimeout을 이용한 방법도 있지만 unpredictable하기 때문에 추천하지 않습니다.
2. 디자인 상 then 구절에 부르는 다른 dependency (e.g. store dispatch )가 있으면 mocking을 통해 간접적으로 확인 할 수 있다는 뜻이었습니다.

[yankee624]

넵 감사합니다!