Den`s blog

컴포넌트/페이지 Testing 프론트엔드쪽 작업을 할때에 접하게 되는 것 중에 @testing-library 라는 것이 있다. 오늘은 프론트엔드 테스팅을 할 때 페이지 렌더 테스트 하는 방법에 대해서 알아보려고 한다. 필자는 React (w/ Typescript) 로 진행하였다. 테스팅환경 개요 컴포넌트를 테스트할 예정이고, 해당 컴포넌트가 하는 일은 로그인 상태에 따라서 렌더링할 라우터를 결정한다. 간단한 코드 샘플을 보자 export const App = () => { return isLoggedInVar ? : } 위와 같이 렌더링을 하는데, 내가 테스트 할 것은 isLoggedInVar 에 따라서 분류가 잘 되나 만하고 싶다. 저 라우터들 안에서 지지고 볶고 하는 것은 의미가 없다. 그러려면 저 ..

테스트 요새 테스트, 더 나아가 TDD 는 개발자의 필수 덕목처럼 여겨지고 있고, 그에 따른 강의가 나오거나 채용조건에 필수로 분류하는 곳이 많아지고 있다. 테스트를 왜 해야하는지에 대해서는 나중에 다뤄보도록 하고 오늘은 테스트를 진행하다가 보면 만나게 될 Mock 에 대해서 알아보자. Mock 구글 번역기에 돌려보면 "모조품" 이라고 해석이 된다. 테스트에서도 동일하다 실제 객체를 만들기엔 테스트하려는 것의 본질을 해치거나 커플링이 너무 많이 돼 구현이 어려운 경우, 데이터베이스 연동이 필요 한 경우, 가짜를 만들어 사용해야 하는데 이것을 Mock이라 합니다. 간단한 예제 const myMock = jest.fn(); console.log(myMock()); // > undefined myMock.mo..