React - TDD, Testing Library, Jest, expect, matcher

TDD - Test-Driven Development  : 테스트 주도 개발

원하는 테스트 코드를 작성하고 실행 여부를 확인하여 실제코드를 작성하는것을 말한다.

 

TDD 장점

• 버그 감지: 테스트를 먼저 작성하면 개발 프로세스 초기에 기능 문제를 식별 가능.
• 디자인 : 개발자는 코드를 작성하기 전에 디자인을 충분히 생각해야 하기 때문에 더 모듈화되고 유연하며 확장 가능한 코드로 작성가능.
• 문서화: 테스트는 코드베이스에 대한 문서 형식으로 사용되며 시스템이 어떻게 작동하는지 확인 가능.
• 리팩토링: 테스트를 진행하면서 의도하지 않은 동작 변경 사항에 대한 코드를 리팩터링할 수 있다.

 

---

 

React Testing Library : 행동 중심 테스트

React Testing Library

• 목적: React Testing Library는 사용자의 관점에서 컴포넌트의 기능을 테스트하는 데 중점을 둔다. 사용자가 실제로 어떻게 화면을 사용할지에 초점을 맞추어 테스트한다.
• 방식: 이 라이브러리는 주로 '어떤 일이 발생하면 어떤 결과가 나타나야 한다'는 식으로 테스트를 진행한다. 컴포넌트의 내부 상태보다는 화면에 무엇이 보이는지, 사용자의 행동에 어떻게 반응하는지를 테스트한다
• 특징: 내부 구현보다는 결과물에 더 초점을 맞추며, 이를 통해 더 견고하고 신뢰할 수 있는 테스트를 만들 수 있다.

Enztme : 구현 주도 테스트

Enzyme

• 목적: Enzyme은 React 컴포넌트의 내부 구현을 더 자세히 테스트한다.  컴포넌트의 구조, 상태, 생명주기 메서드 등을 쉽게 테스트할 수 있다.
• 방식: Enzyme은 컴포넌트를 실제 브라우저 환경과 유사하게 렌더링하여 내부의 구현을 테스트한다. 예를 들어, 특정 함수가 호출되는지, 상태가 올바르게 변경되는지 등을 확인할 수 있다.
• 특징: Enzyme은 컴포넌트의 내부 작동 방식에 더 깊이 파고들어 테스트할 수 있는 능력을 제공하지만, 때로는 세부 사항에 너무 치중할 위험이 존재한다.

결론 

행동 중심 테스트의 경우 소프트웨어에서 사용자를 위해 어떻게 작동하는지가 중점.

구현 중심 테스트의 경우 소프트웨어에서 각 부분이 어떻게 동작하는지 기술적으로 세부사항을 점검하느것이 중점.

---

Jest

 

• 정의 : Jest는 자바스크립트 테스팅 프레임워크로, 페이스북에 의해 만들어졌으며, 주로 React와 같은 자바스크립트 라이브러리 및 프레임워크와 함께 사용된다.
• 목적 : 애플리케이션의 코드가 정상적으로 작동하는지 확인하기 위한 테스트를 작성하고 실행하는 데 사용된다.

 

React에서의 Jest 사용

• 테스트 작성:  컴포넌트가 올바르게 렌더링되는지, 특정 이벤트에 반응하는지, 상태 관리가 잘 되는지 등을 검사할 수 있다.
• 스냅샷 테스팅: Jest는 컴포넌트의 "스냅샷"을 찍어 현재의 렌더링 결과를 기록하고, 추후의 테스트에서 이 스냅샷과 비교하여 변화를 감지하는 스냅샷 테스팅 기능을 제공한다.
• 모의(Mock) 기능: 외부 시스템이나 모듈에 의존하지 않고 테스트를 할 수 있도록 모의 함수나 객체를 생성하는 기능을 제공하여, 더 견고하고 독립적인 테스트가 가능하다.

장점

• 간편한 설정: Jest는 설정이 간단하며 대부분의 React 프로젝트에서 쉽게 통합하여 사용할 수 있다.
• 빠른 실행 속도: Jest는 테스트 실행 속도가 빠르며,  병렬로 실행된다.
• 자체적인 어서션 라이브러리: Jest는 다양한 메서드를 제공하여, 테스트 케이스를 쉽게 작성할 수 있게 도와준다.

 

예시

 

간단한 컴포넌트이다.

버튼을 누르게되면 내부 상태가 바뀌도록 작성해보자.

import React, { useState } from 'react';

function Button() {
  const [text, setText] = useState('Click me');

  return (
    <button onClick={() => setText('Clicked')}>
      {text}
    </button>
  );
}

export default Button;

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('버튼 클릭 시 텍스트 변경', () => {
  // 컴포넌트 렌더링
  const { getByText } = render(<Button />);

  // 버튼 요소를 가져옵니다.
  const buttonElement = getByText('Click me');

  // 버튼 클릭 이벤트 시뮬레이션
  fireEvent.click(buttonElement);

  // 기대 결과 확인
  expect(getByText('Clicked')).toBeInTheDocument();
});

 

• render: React Testing Library에서 제공하는 render 함수를 사용해 Button 컴포넌트를 렌더링한다
• fireEvent: 사용자의 클릭 이벤트를 시뮬레이션하기 위해 fireEvent를 사용
• expect, getByText: 테스트에서 예상되는 결과를 반환

expect

• 정의: Jest에서 테스트 대상의 값을 검증할 때 사용하는 함수이다. 이 함수는 테스트하고자 하는 값이나 표현식을 인자로 받는다
• 사용법: expect 함수는 matcher 함수와 함께 사용되어, 특정 값이나 조건을 만족하는지 검증한다.
• ex) expect(10).toBe(10); 인 경우 expect(10)은 테스트하려는 값 10이고, .toBe(10)은 테스트 값과 10이 동일한지를 검증하는 matcher이다.

matcher

• 정의: matcher는 expect 함수와 함께 사용되며, 실제 값과 기대하는 값 사이의 관계를 뜻한다.
• 종류: Jest에는 다양한 matcher가 존재한다. 예를 들어, .toBe(), .toEqual(), .toContain(), .toBeTruthy() 등이 존재한다. 각각은 테스트 조건에 따라 사용된다.
  • .toBe(value): 값이 value와 정확히 같은지 확인.
  • .toEqual(value): 객체나 배열 같은 복합 자료형을 검증할 때 사용.
  • .toContain(item): 배열이나 문자열이 특정 아이템을 포함하는지 확인.