Den`s blog

(Testing) React Page Render Test With Mock 본문

ReactJS

(Testing) React Page Render Test With Mock

shinYeongHyeon 2021. 9. 5. 15:23
반응형

컴포넌트/페이지 Testing

프론트엔드쪽 작업을 할때에 접하게 되는 것 중에 @testing-library 라는 것이 있다.

오늘은 프론트엔드 테스팅을 할 때 페이지 렌더 테스트 하는 방법에 대해서 알아보려고 한다.

필자는 React (w/ Typescript) 로 진행하였다.


테스팅환경 개요

<App /> 컴포넌트를 테스트할 예정이고,

해당 컴포넌트가 하는 일은 로그인 상태에 따라서 렌더링할 라우터를 결정한다.

간단한 코드 샘플을 보자

export const App = () => {
  return isLoggedInVar ? <LoggedInRouter /> : <LoggedOutRouter />
}

위와 같이 렌더링을 하는데, 내가 테스트 할 것은 isLoggedInVar 에 따라서 분류가 잘 되나 만하고 싶다.

저 라우터들 안에서 지지고 볶고 하는 것은 의미가 없다.

그러려면 저 라우터들을 Mock 해야 한다.

 

Mock 이 무엇인지 궁금하다면

 

(Testing) Mock ??

테스트 요새 테스트, 더 나아가 TDD 는 개발자의 필수 덕목처럼 여겨지고 있고, 그에 따른 강의가 나오거나 채용조건에 필수로 분류하는 곳이 많아지고 있다. 테스트를 왜 해야하는지에 대해서는

den-shin.tistory.com

 

Mock

우리가 Mock 해야할 것 중 하나만 해보고자 한다, LoggedOutRouter 를 진행해보자.

그렇다면, import 하는 LoggedOutRouter 를 우리가 원하는 형태로 변경해야 한다.

특정 디렉토리에 있는 것을 우리가 원하는 간단한 형태로 해야 단위 테스트가 편하다.

 

아래 코드처럼 진행하면 된다 !

import React from "react";
import { render } from "@testing-library/react";
import App from "../app";

jest.mock("../../routers/logged-out-router", () => {
  return {
    LoggedOutRouter: () => <span>logged-out</span>
  }
});

describe("<App />", () => {
  it("renders OK", () => {
    render(<App />);
    
    /* 이후 테스트 생략 */
  });
});

이러면 <App /> 을 render 할 때, 그 안의 동작들로 인해 오류가 날 일도 없고, App Render 테스트 자체에 집중할 수 있게 된다.

728x90
반응형

'ReactJS' 카테고리의 다른 글

React 에서 페이지 전환 (useHistory, useLocation)  (0) 2021.05.09
React 컴포넌트 생명주기 2  (0) 2021.01.31
React 컴포넌트 생명주기 1  (0) 2021.01.31
Comments