[Front] 테스트 주도 개발

코드 테스트

1. 코드의 신뢰성을 보장하는 도구

우리가 작성한 코드가 의도한 대로 동작하는지 확인하는 것은 매우 중요합니다. 그러나 수동적인 방법으로 input/output을 확인하는 것은 비효율적입니다. 테스트 코드를 작성하면 작성한 코드가 의도한 대로 작동하는지 빠르게 확인할 수 있습니다.

2. 코드 리팩토링의 안전망

코드를 리팩토링할 때, 테스트 코드가 있다면 코드를 변경한 후에도 소프트웨어가 여전히 기능을 제공하는지 확인할 수 있습니다. 이는 소프트웨어의 안정성을 유지하는 데 중요한 역할을 합니다.

3. 명세서로서의 테스트 코드

잘 작성된 테스트 코드는 소프트웨어의 명세서가 될 수 있습니다. 코드를 직접 읽는 대신 테스트 케이스를 통해 소프트웨어의 기능과 예외 상황을 이해할 수 있습니다.

TDD(Test-Driven Development): 테스트 주도 개발의 중요성

테스트 코드를 작성하는 또 다른 방법은 TDD(Test-Driven Development)입니다. TDD를 통해 테스트 코드를 먼저 작성함으로써 다음과 같은 이점을 얻을 수 있습니다.

1. 버그 예방

테스트 코드를 먼저 작성하면 예외적인 상황을 사전에 고려하고 처리할 수 있습니다. 이로써 버그가 발생할 확률을 낮출 수 있습니다.

2. 객체 지향적 설계

TDD를 통해 테스트하는 관점에서 객체가 어떻게 동작해야 하는지 고민하고 객체 간의 상호작용을 명확히 할 수 있습니다. 이는 더 나은 객체 지향적인 설계를 가능하게 합니다.

3. 코드 품질 향상

테스트 코드를 작성하면서 코드 구현을 위한 설계 요소를 고민함으로써 더 나은 코드를 생산할 수 있습니다. 또한, 테스트 코드가 추가될 때마다 소프트웨어의 품질을 높일 수 있습니다.

 

 

TDD 사용방법

1. 실패하는 테스트 코드 작성

2. 테스트 통과 시키기

    - 테스트를 통과 시킬 만큼의 코드만 구현하는 과정

3. 리팩토링

    - 테스트를 통과시키기 위한 최소한의 코드에서 객체 지향적으로 가독성을 높일 수 있도록 구조적 개선을 하는 데에 초점을 두기

 

 

테스트 작성의 기본 원칙

코드의 품질을 보장하고 안정성을 확보하기 위해 테스트 코드 작성은 중요합니다. 효과적인 테스트 작성을 위해 테스트의 종류, 작성 순서, 그리고 의미 있는 테스트 작성 방법에 대해 알아봅시다.

테스트의 종류

1. 단위 테스팅(Unit Testing): 모듈/컴포넌트/클래스 단위의 기능을 테스트합니다. 이는 개발자가 작성하며 자동화됩니다.
2. 통합 테스팅(Integration Testing): 두 개 이상의 모듈이 제대로 연동되는지 확인하는 테스트입니다. 개발자가 작성하며 자동화됩니다.
3. E2E 테스팅(End-to-End Testing): 실제 사용자 경험을 시뮬레이션하여 전체 시스템의 기능을 테스트합니다. 주로 QA 전문가가 작성하며 자동화됩니다.
4. 인수 테스팅(Acceptance Testing): 주어진 요구사항을 충족하는지 확인하는 테스트입니다. 수동으로 진행됩니다.

 

의미 있는 테스트 작성하기

테스트 작성 시 주의할 점은 다음과 같습니다:

1. 사용자 요구사항 테스트: 모든 사용자 요구사항이 테스트 케이스로 포함되었는지 확인합니다.
2. 인터페이스 테스트: 백엔드의 인터페이스가 예상대로 동작하는지 확인합니다.
3. 프론트엔드 기능 테스트: 사용자가 이용할 기능이 예상한 대로 동작하는지 확인합니다.

불필요한 테스트 작성 방지

1. 모든 라인을 테스트하지 않기: 모든 코드 라인을 테스트할 필요는 없습니다.
2. 반응성 테스트에 대한 과도한 관심 줄이기: 모든 환경에 대해 반응성을 확인할 필요는 없습니다.

 

 

Jest 예시

// 예를 들어, Button 컴포넌트를 테스트해보겠습니다.
import React from 'react';
import { render, fireEvent } from '@testing-library/react'; // Jest와 함께 제공되는 테스트 유틸리티 라이브러리

// 테스트할 컴포넌트를 불러옵니다.
import Button from './Button';

// describe를 사용하여 테스트 스위트를 그룹화합니다.
describe('Button 컴포넌트', () => {
  // test를 사용하여 개별 테스트 케이스를 작성합니다.
  test('버튼이 렌더링되는지 확인', () => {
    // render 함수를 사용하여 컴포넌트를 렌더링합니다.
    const { getByText } = render(<Button label="Click me" />);
    
    // getByText 함수를 사용하여 버튼 엘리먼트를 가져옵니다.
    const buttonElement = getByText('Click me');
    
    // expect와 toBe를 사용하여 테스트를 수행합니다.
    expect(buttonElement).toBeInTheDocument(); // 버튼이 렌더링되었는지 확인합니다.
  });
  
  // 이벤트 핸들러가 올바르게 동작하는지 테스트합니다.
  test('버튼 클릭 시 onClick 함수가 호출되는지 확인', () => {
    // 모의(mocks) 함수를 생성합니다.
    const onClickMock = jest.fn();
    
    // render 함수를 사용하여 컴포넌트를 렌더링하고, fireEvent 함수를 사용하여 클릭 이벤트를 발생시킵니다.
    const { getByText } = render(<Button label="Click me" onClick={onClickMock} />);
    const buttonElement = getByText('Click me');
    fireEvent.click(buttonElement);
    
    // expect와 toHaveBeenCalled을 사용하여 이벤트 핸들러가 호출되었는지 확인합니다.
    expect(onClickMock).toHaveBeenCalled(); // onClickMock 함수가 호출되었는지 확인합니다.
  });
});

 

React Testing Library 예시

// 예를 들어, Button 컴포넌트를 테스트해보겠습니다.
import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react'; // React Testing Library에서 제공되는 테스트 유틸리티 라이브러리

// 테스트할 컴포넌트를 불러옵니다.
import Button from './Button';

// describe를 사용하여 테스트 스위트를 그룹화합니다.
describe('Button 컴포넌트', () => {
  // test를 사용하여 개별 테스트 케이스를 작성합니다.
  test('버튼이 렌더링되는지 확인', () => {
    // render 함수를 사용하여 컴포넌트를 렌더링합니다.
    render(<Button label="Click me" />);
    
    // screen.getByText 함수를 사용하여 버튼 엘리먼트를 가져옵니다.
    const buttonElement = screen.getByText('Click me');
    
    // expect와 toBeInTheDocument를 사용하여 테스트를 수행합니다.
    expect(buttonElement).toBeInTheDocument(); // 버튼이 렌더링되었는지 확인합니다.
  });
  
  // 이벤트 핸들러가 올바르게 동작하는지 테스트합니다.
  test('버튼 클릭 시 onClick 함수가 호출되는지 확인', () => {
    // 모의(mocks) 함수를 생성합니다.
    const onClickMock = jest.fn();
    
    // render 함수를 사용하여 컴포넌트를 렌더링합니다.
    render(<Button label="Click me" onClick={onClickMock} />);
    
    // screen.getByText 함수를 사용하여 버튼 엘리먼트를 가져옵니다.
    const buttonElement = screen.getByText('Click me');
    
    // fireEvent 함수를 사용하여 클릭 이벤트를 발생시킵니다.
    fireEvent.click(buttonElement);
    
    // expect와 toHaveBeenCalled을 사용하여 이벤트 핸들러가 호출되었는지 확인합니다.
    expect(onClickMock).toHaveBeenCalled(); // onClickMock 함수가 호출되었는지 확인합니다.
  });
});