Test

• 소프트웨어 관점에서 테스트를 정의한다면 애플리케이션이 요구 사항에 맞게 동작하고 있는지를 검증하는 것을 말한다.
• 보통 개발을 완료하면 사용자가 사용하기 전에 QA(Quality Assuarance)라는 과정을 거치는데, 이 과정을 테스트라고 할 수 있다.
• 실제로 전체 개발 과정을 보면 검증이 각 단계에서 계속해서 이루어진다고 할 수 있다.
• 예를 들면, 프로토타입(개발이 이루어지기 전이나 서비스 내에서 새로운 기능을 제작하기 전, 테스트를 목적으로 만드는 것) 과정에서 UX를 미리 검증하고 개선하는 것, 서버의 API를 호출하고 값을 예측하는 것, 마크업이 끝난 이후 디자인과 비교해 보는 것 등을 테스트라고 할 수 있다.

React Componenet Test

리액트 컴포넌트를 테스트하는 방법을 크게 2가지로 나눌 수 있다.

• 컴포넌트 트리 렌더링: 간략화된 테스팅 환경 및 출력값이 확실한 경우.
• 완성된 앱에서 테스트: 현실적 브라우저 환경 / E2E(End-to-End) 테스트라고 알려져 있다.

단위 테스트

• 일반적으로 단위 테스트란 애플리케이션 일부(주로 컴포넌트)를 독립적으로 테스트하는 것을 말한다.
• 메서드를 테스트하는 또 다른 메서드이며, 하나의 Unit Test는 하나의 메서드의 특정 루틴을 검사한다.
• 모듈이나 애플리케이션 안에 있는 개별적인 코드 단위가 의도하는 대로 동작하는지를 확인하는 방법이다.

통합 테스트

• 서로 다른 부분(각기 다른 컴포넌트들)이 모여 특정 상황에서 잘 엮여서 작동하는지 확인하는 것이다.
• 통합 테스트의 예로 특정 컴포넌트의 모든 필수 속성값(Props)이 자손 컴포넌트에 제대로 전달되었는지 확인해볼 수 있다.

전체 테스트

• 애플리케이션을 브라우저 환경에서 테스트하는 것을 말한다.
• 전체 테스트의 예로 이메일 주소와 비밀번호를 입력한 뒤 백엔드 서버로 Form을 제출하는 회원 가입 과정을 들 수 있다.

React에서의 단위 테스트

React 환경에서는 아래의 동작에 대한 부분을 검증하기 위해 작성한다고 생각할 수 있다.

• Testing basic component rendering
• Testing props
• Testing state
• Testing event handlers

React Component Testing

리액트 프로젝트는 컴포넌트 단위로 테스트 로직을 정해줄 수 있다. 리액트 컴포넌트를 테스팅 할 때, 주로 아래와 같은 형식으로 진행한다.

• 1. 특정 props에 따라 컴포넌트가 잘 렌더링 되는지 확인
  2. 이전에 렌더링 했던 결과와 현재 렌더링 한 결과가 일치하는지 확인
  3. 특정 DOM 이벤트를 예상하여 원하는 변화가 제대로 발생하는지 확인
  4. 렌더링 된 결과물을 이미지로 저장하여 픽셀을 확인하고 일치하는지 확인

4번의 경우에는 스토리북을 이용하여 테스팅 하는 것이 효율적이고 편하다.
PropTypes를 이용하여 정적 타입 검사를 수행하고, Jest와 같은 단위 테스트 도구를 이용하여 논리적인 검사를 수행할 수 있다.

정적 타입 검사를 하기 위한 도구

PropTypes
각 컴포넌트에서 전달받는 props의 유효성 검사를 할 수 있다. (개발 모드에서만 확인 가능하다.)

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

• 위 코드에서처럼 PropTypes를 선언하여 컴포넌트 간에 주고받는 props를 확인하여 사전에 버그를 예방할 수 있다.
• 상세한 PropTypes 정의로 코드의 가독성을 향상시킬 수 있다.

논리적인 검사를 하기 위한 도구

React Component 테스트를 하기 위해서 Jest가 테스트 프레임워크로 가장 많이 사용되고 있고, 컴포넌트 렌더링 등과 같은 동작 테스트를 위해서는 Enzyme, @testing-library/react 등과 같은 테스트 라이브러리가 사용되고 있다.

• Jest
  Facebook에서 만든 JavaScript Test Framework. 빠르게 설치하고, 테스트하기 좋다. 실제 브라우저가 아닌 가상환경에서 실행된다.

• Enzyme
  Airbnb에서 개발한 React를 위한 JavaScript Testing utility.
  Dom 이벤트를 시뮬레이트 할 수 있고, 라이프 사이클이 제대로 돌아가는지 확인 가능하다.
  컴포넌트 렌더링을 위해 아래와 같은 메소드 사용.

  • shallow - 자기 자신만 렌더링을 하므로 독립적으로 해당 컴포넌트만 독립적으로 테스트할 수 있다.
  • mount - 관련된 컴포넌트를 모두 렌더링 한다. 다른 컴포넌트와의 관계를 테스트할 수 있다.
  • render - 컴포넌트를 정적인 html로 렌더링 한다.

• react-testing-library
  가벼운 라이브러리 모듈, 구성 요소의 기능을 테스트하기 위한 코드를 작성하도록 한다.
  state, props를 체크하지 않고, 사용자에게 보여지는 dom 객체를 이용하여 검증한다.
  Enzyme에서 제공하는 render 메소드만 제공하고, mount, shallow와 같은 렌더링 메소드를 제공하지 않는다.

Snapshot Test (Jest)

스냅샷 테스팅은 컴포넌트를 주어진 설정으로 렌더링하고, 그 결과물을 파일로 저장한다.
그리고 다음에 테스트를 할 때 이전의 결과물과 일치하는지 확인하는 방식이다.
변경이 발생할 경우 에러를 발생시킴으로써 컴포넌트의 의도하지 않은 변경을 추적할 수 있다.
컴포넌트 내부 메소드를 호출시키고 다시 렌더링 해서 그 결과물도 스냅샷으로 저장하고 각 상황의 모두 이전에 렌더링 했던 결과와 일치하는지 비교할 수 있다.

• 장점

  • 테스트를 작성하기 쉽다.
  • 의도하지 않은 변경을 빠르게 감지할 수 있다.

• 단점

  • 테스트에 대한 명확한 의도를 파악하기 어렵다.
    테스트가 실패할 수 있는 여러 상황 중 어떤 부분에서 실패하는지 정확히 알 수 없기 때문에 그 코드를 다시 디버깅해야 하는 상황이 발생할 수 있다.
  • 테스트에 실패했을 때 버그라고 정확히 인지하지 않고, Snapshot을 업데이트할 가능성이 있다.

---

🤔 React에서 Test 하는 방법에는 어떤 것이 있는지 알아봤는데 추후에 실제로 어떻게 사용하는지 더 공부해야 할 것 같고, 요즘 스토리북을 많이 사용한다고 들었는데 그 부분에 대해서도 공부가 필요할 것 같다.