[Front] jest로 유닛테스트 하기 위해 돔 구조 재현하기

[ka0824]

문제 상황

• 의도 : 컴포넌트 안의 상태와 이벤트 리스너를 테스트
• 문제 : 컴포넌트 안의 값을 어떻게 불러오는지 모르겠음.

import React from 'react';
import Renderer from 'react-test-renderer';
import Game from '../components/Game/Game';
import store from '../store/store';
import { Provider } from 'react-redux';

describe('Game component', () => {
    let component = null;

    it('renders', () => {
        component = Renderer.create(   // 
        <Provider store={store}>
            <Game />
        </Provider>
        )
    });

   console.log(component)                 // null 값이 나옴. 
                                          // 안에 있는 state와 이벤트 리스너를 테스트하기 위해서는 어떻게 해야할까?
})

해결책 고려하기

• jest, react, unit test를 검색어로 조합하여 구글링
• github에 오픈되어 있는 프로젝트 참고해보기

시도해봤던 방법

• getInstance()를 붙여보기
• 이유: 블로그에 작성된 코드를 참고

  console.log(component.getInstance())         // 그대로 null이 나옴

• toJSON()으로 객체로 만들어서 값을 뽑아 보기
  • 이유: 객체 형태면 프로퍼티처럼 값이 저장되어있을까 싶어서 시도.

    
    it('renders', () => {
    component = Renderer.create(   // 
    <Provider store={store}>
        <Game />
    </Provider>
    ).toJSON();
    });

console.log(component); // 생각했던 형태가 아님.

[ka0824]

시도

• react-test-library 설치
• 하지만, state / 상태에 대한 직접적인 접근 어려웠음
• react-test-library 자체가 사용자 경험 중심으로 테스트 하는 방식이라, 어떻게 렌더링이 되느냐를 판단하지
  어떤 값을 가지고 있느냐를 판단하는 것은 다른 접근이 필요한듯함.

다음 시도

• Enzyme 라이브러리를 이용한다면 직접적으로 state 값을 불러올 수 있는 것으로 보임.
• 해당 라이브러리를 테스트해 볼 예정.