<div id="readability-page-1" class="page"><div><p>최근 프론트엔드 테스트에대해 관심이 생겼다.<br>
<a href="https://www.youtube.com/watch?v=q9d631Nl0_4">https://www.youtube.com/watch?v=q9d631Nl0_4</a><br>
이 영상이 매우 유익한 것 같다.</p>
<hr>
<h2 id="테스트-방법에-대한-고민">테스트 방법에 대한 고민</h2>
<p>React test를 위한 도구로 jest 프레임워크 위에서 <code>testing-library/react</code>, <code>Enzyme</code> 많이 사용하고있다.</p>
<p><code>testing-library</code>는 Behavior Driven Test 주도의 테스트 방법론을 따르기 적합하기때문에, 실제 화면에 대한 테스트케이스를 작성하기 적합하다. </p>
<p>화면에 표현되는 props가 제대로 나타나는지, 액션에 의해 화면이 제대로 변경되는지와 같은 테스트다.</p>
<p>반면, 컴포넌트가 어떤 state, props를 가지고있는지, 클릭했을때 어떤 함수가 호출되는지에 대한 테스트는 적합하지않다. </p>
<p>state, props 에 대한 테스트를 원한다면 <code>Enzyme</code>를 사용하는게 적합하다.<br>
그러나 Enzyme는 개발자가 단순히 state 의 변수를 수정하는경우에도 테스트케이스를 통과하지 못하게된다.</p>
<p>둘중 어떤 라이브러리를 사용할지는 컴포넌트의 성격에 달라질 것 같다.<br>
단순한 로직을 갖고있는, 단순 화면을 보여주는 컴포넌트라면 <code>testing-library</code>를 사용하면되겠다.<br>
간단한 화면이지만 내부적으로 많은 훅을 사용하고 복잡한 로직을 갖고있는 컴포넌트라면 <code>Enzyme</code>를 사용하는게 좋아보인다.</p>
<h2 id="atomic-desigin-pattern">Atomic Desigin Pattern</h2>
<p>Atomic Design 패턴으로 작성된 리액트 애플리케이션에 테스트를 적용하고자 했을때 어떻게 테스트를 하는게 좋을까에대한 고민이 들었다.</p>
<h3 id="atom-molecules-template">atom, molecules, template</h3>
<blockquote>
<p>Testing Library + jest mock function </p>
</blockquote>
<p>내 기준으로 <code>atom</code>, <code>molecules</code>, <code>template</code>는 순수한 컴포넌트로 단순 props를 화면에 보여주고, 이벤트를 부모에게 전달하는게 주된 역할이다.  (template은 이벤트 발생이 거의 없겠다.)</p>
<p>화면의 표현은 testing-library를, 액션의 전달은 jest의 mock function을 사용하면 충분한 테스트가 가능하다고 생각한다. </p>
<h3 id="organism-page">organism, page</h3>
<blockquote>
<p>testing-library (+ redux-mock-store)<br>
enzyme + jest mock function. (?? 확인필요)</p>
</blockquote>
<p>더러운 컴포넌트로써 store와의 연동이 이루어지는 영역이다.</p>
<p>organism은 store의 데이터를 연동하여 뿌려주고, 이벤트가 발생하면 store로 action을 dispatch 한다.</p>
<p>page는 페이지 초기 데이터 구성을 위해 비동기요청과 관련된 action을 dispatch 한다.<br>
page에서 데이터가 제대로 뿌려지는 케이스까지 테스트하는건 e2e테스트가 되어버리기때문에, 내 기준에서 page가 하는 기능에 대해서만 테스트를 하는게 좋아보인다.</p>
<h4 id="로직이-단순할-경우">로직이 단순할 경우</h4>
<p>연동되는 store를 <code>redux-mock-store</code> 라이브러리를통해 mock store로 구현하고, mock data, action을 제대로 dispatch 하는지 확인해보면 될 것 같다.</p>
<h4 id="로직이-복잡할-경우">로직이 복잡할 경우</h4>
<p>컴포넌트의 로직이 복잡하고, 다양한 훅을 사용하고있다면 enzyme를 이용하자.<br>
enzyme가 컴포넌트가 호출하는 함수나 훅을 mocking 하는 기능을 지원한다면 jest mock function과 조합하면 테스트가 가능할 것 같다.</p>
<h2 id="결론">결론</h2>
<blockquote>
<p>실제 Store vs Mock Store </p>
<ul>
<li>실제 Store<br>
Store의 구조가 복잡하거나, 네트워크 요청에 대한 테스트가 중요할 경우</li>
<li>Mock Store<br>
Store의 구조가 단순하고, 네트워크 요청에 대한 테스트가 크게 중요하지 않을경우</li>
</ul>
</blockquote>
<p>결국 Store의 테스트를 실제 store를 이용할 것 이나, mock-store를 이용할것이냐에 대한 차이인 것 같다.</p>
<p>실제 store를 테스트해보고 싶다면, 실제 API 서버의 환경에 영향을 받는다는 문제점이 있기에 간단한 mock api server를 구현해놓고, test 시에는  mock api server 서버로 요청이 갈 수 있도록 하거나 하는 처리가 필요해보인다.<br>
(네트워크 요청에 대한 테스트가 중요할 경우 적용하자.)</p>
<p>mock store는 redux-mock-store 패키지를 이용하면 된다.</p>
<h2 id="참고">참고</h2>
<p><a href="https://medium.com/wesionary-team/react-testing-library-vs-enzyme-afd29db380ac">Enzyme vs Testing Library</a><br>
<a href="https://redux.js.org/usage/writing-tests">redux-test</a><br>
<a href="https://www.daleseo.com/react-testing-library/">https://www.daleseo.com/react-testing-library/</a><br>
<a href="https://www.robinwieruch.de/react-connected-component-test">redux-mock-store를 활용한 테스트</a></p>
<hr>
<h2 id="리스트-테스트하기">리스트 테스트하기</h2>
<p>리스트를 테스할 때가 있다. 사실 순서보다 갯수가 올바르게 표현되는지를 확인하는경우가 많다.<br>
아래는 그에 대한 예제다<br>
<a href="https://balavishnuvj.com/blog/testing-lists-items-with-react-testing-library/">https://balavishnuvj.com/blog/testing-lists-items-with-react-testing-library/</a></p></div></div>

ginameee.log

Jangchun Lee

최근 프론트엔드 테스트에대해 관심이 생겼다.
https://www.youtube.com/watch?v=q9d631Nl0_4
이 영상이 매우 유익한 것 같다.
테스트 방법에 대한 고민
React test를 위한 도구로 jest 프레임워크 위에서 testing-library/react, Enzyme 많이 사용하고있다.
testing-library는 Behavior Driven Test 주도의 테스트 방법론을 따르기 적합하기때문에, 실제 화면에 대한 테스트케이스를 작성하기 적합하다. 
화면에 표현되는 props가 제대로 나타나는지, 액션에 의해 화면이 제대로 변경되는지와 같은 테스트다.
반면, 컴포넌트가 어떤 state, props를 가지고있는지, 클릭했을때 어떤 함수가 호출되는지에 대한 테스트는 적합하지않다. 
state, props 에 대한 테스트를 원한다면 Enzyme를 사용하는게 적합하다.
그러나 Enzyme는 개발자가 단순히 state 의 변수를 수정하는경우에도 테스트케이스를 통과하지 못하게된다.
둘중 어떤 라이브러리를 사용할지는 컴포넌트의 성격에 달라질 것 같다.
단순한 로직을 갖고있는, 단순 화면을 보여주는 컴포넌트라면 testing-library를 사용하면되겠다.
간단한 화면이지만 내부적으로 많은 훅을 사용하고 복잡한 로직을 갖고있는 컴포넌트라면 Enzyme를 사용하는게 좋아보인다.
Atomic Desigin Pattern
Atomic Design 패턴으로 작성된 리액트 애플리케이션에 테스트를 적용하고자 했을때 어떻게 테스트를 하는게 좋을까에대한 고민이 들었다.
atom, molecules, template
Testing Library + jest mock function 
내 기준으로 atom, molecules, template는 순수한 컴포넌트로 단순 props를 화면에 보여주고, 이벤트를 부모에게 전달하는게 주된 역할이다.  (template은 이벤트 발생이 거의 없겠다.)
화면의 표현은 testing-library를, 액션의 전달은 jest의 mock function을 사용하면 충분한 테스트가 가능하다고 생각한다. 
organism, page
testing-library (+ redux-mock-store)
enzyme + jest mock function. (?? 확인필요)
더러운 컴포넌트로써 store와의 연동이 이루어지는 영역이다.
organism은 store의 데이터를 연동하여 뿌려주고, 이벤트가 발생하면 store로 action을 dispatch 한다.
page는 페이지 초기 데이터 구성을 위해 비동기요청과 관련된 action을 dispatch 한다. 
page에서 데이터가 제대로 뿌려지는 케이스까지 테스트하는건 e2e테스트가 되어버리기때문에, 내 기준에서 page가 하는 기능에 대해서만 테스트를 하는게 좋아보인다.
로직이 단순할 경우
연동되는 store를 redux-mock-store 라이브러리를통해 mock store로 구현하고, mock data, action을 제대로 dispatch 하는지 확인해보면 될 것 같다.
로직이 복잡할 경우
컴포넌트의 로직이 복잡하고, 다양한 훅을 사용하고있다면 enzyme를 이용하자.
enzyme가 컴포넌트가 호출하는 함수나 훅을 mocking 하는 기능을 지원한다면 jest mock function과 조합하면 테스트가 가능할 것 같다.
결론
실제 Store vs Mock Store 
실제 Store
Store의 구조가 복잡하거나, 네트워크 요청에 대한 테스트가 중요할 경우
Mock Store
Store의 구조가 단순하고, 네트워크 요청에 대한 테스트가 크게 중요하지 않을경우
결국 Store의 테스트를 실제 store를 이용할 것 이나, mock-store를 이용할것이냐에 대한 차이인 것 같다.
실제 store를 테스트해보고 싶다면, 실제 API 서버의 환경에 영향을 받는다는 문제점이 있기에 간단한 mock api server를 구현해놓고, test 시에는  mock api server 서버로 요청이 갈 수 있도록 하거나 하는 처리가 필요해보인다.
(네트워크 요청에 대한 테스트가 중요할 경우 적용하자.)
mock store는 redux-mock-store 패키지를 이용하면 된다.
참고
Enzyme vs Testing Library
redux-test
https://www.daleseo.com/react-testing-library/
redux-mock-store를 활용한 테스트
리스트 테스트하기
리스트를 테스할 때가 있다. 사실 순서보다 갯수가 올바르게 표현되는지를 확인하는경우가 많다.
아래는 그에 대한 예제다
https://balavishnuvj.com/blog/testing-lists-items-with-react-testing-library/

2021.10.16

댓글