리액트 컴포넌트 테스팅: 스냅샷 및 통합 테스트 마스터하기

현대 웹 개발의 세계에서 사용자 인터페이스(UI)의 신뢰성과 견고성을 보장하는 것은 무엇보다 중요합니다. UI 구축을 위한 인기 있는 자바스크립트 라이브러리인 리액트는 개발자에게 컴포넌트 기반 아키텍처를 제공합니다. 이러한 컴포넌트를 철저히 테스트하는 것은 고품질의 사용자 경험을 제공하는 데 매우 중요합니다. 이 글에서는 두 가지 필수적인 테스트 전략인 스냅샷 테스팅과 통합 테스팅에 대해 자세히 알아보고, 리액트 컴포넌트 테스팅을 마스터하는 데 도움이 되는 실용적인 예제와 모범 사례를 제공합니다.

왜 리액트 컴포넌트를 테스트해야 할까요?

스냅샷 및 통합 테스트의 세부 사항에 대해 알아보기 전에, 먼저 리액트 컴포넌트를 테스트하는 것이 왜 중요한지 이해해 봅시다:

• 회귀(Regression) 방지: 테스트는 컴포넌트 동작의 예기치 않은 변경을 감지하여 코드베이스에 회귀가 발생하는 것을 방지할 수 있습니다.
• 코드 품질 향상: 테스트를 작성하면 컴포넌트의 디자인과 구조에 대해 더 깊이 생각하게 되어 더 깨끗하고 유지보수하기 좋은 코드로 이어집니다.
• 자신감 향상: 포괄적인 테스트 스위트가 있으면 코드를 변경할 때 무언가 잘못될 경우 알림을 받을 수 있다는 사실을 알기 때문에 자신감을 가질 수 있습니다.
• 협업 촉진: 테스트는 컴포넌트에 대한 문서 역할을 하여 다른 개발자들이 코드를 더 쉽게 이해하고 작업할 수 있도록 돕습니다.

스냅샷 테스팅

스냅샷 테스팅이란?

스냅샷 테스팅은 리액트 컴포넌트를 렌더링하고 그 결과물(스냅샷)을 이전에 저장된 스냅샷과 비교하는 방식입니다. 만약 차이점이 있다면 테스트는 실패하며, 이는 잠재적인 문제를 나타냅니다. 이는 컴포넌트의 출력물에 대한 "사진"을 찍고 그것이 예기치 않게 변경되지 않았는지 확인하는 것과 같습니다.

스냅샷 테스팅은 UI가 의도치 않게 변경되지 않았는지 확인하는 데 특히 유용합니다. 주로 스타일링, 레이아웃 또는 컴포넌트의 전반적인 구조 변경을 감지하는 데 사용됩니다.

스냅샷 테스팅 구현 방법

스냅샷 테스팅을 시연하기 위해 인기 있는 자바스크립트 테스팅 프레임워크인 Jest와 Enzyme (또는 React Testing Library - 아래 참조)을 사용할 것입니다.

Jest와 Enzyme을 사용한 예제 (사용 중단 알림):

참고: Enzyme은 React Testing Library를 선호하는 많은 사람들에 의해 사용이 중단된 것으로 간주됩니다. 이 예제는 Enzyme 사용법을 보여주지만, 새로운 프로젝트에는 React Testing Library를 권장합니다.

먼저 Jest와 Enzyme을 설치합니다:

            npm install --save-dev jest enzyme enzyme-adapter-react-16
npm install --save react-test-renderer

            

              
                Copy
              
            
          

사용하는 리액트 버전에 맞는 어댑터로 `react-adapter-react-16`을 교체하세요.

간단한 리액트 컴포넌트를 만듭니다 (예: Greeting.js):

            import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

            

              
                Copy
              
            
          

이제 스냅샷 테스트를 만듭니다 (예: Greeting.test.js):

            import React from 'react';
import { shallow } from 'enzyme';
import Greeting from './Greeting';

descibe('Greeting Component', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<Greeting name="World" />);
    expect(wrapper).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Jest를 사용하여 테스트를 실행합니다:

            npm test

            

              
                Copy
              
            
          

테스트를 처음 실행하면 Jest는 Greeting 컴포넌트의 렌더링된 출력을 포함하는 스냅샷 파일(예: __snapshots__/Greeting.test.js.snap)을 생성합니다.

이후의 테스트 실행은 현재 출력을 저장된 스냅샷과 비교합니다. 일치하면 테스트는 통과합니다. 다르면 테스트는 실패하며, 변경 사항을 검토하고 스냅샷을 업데이트하거나 컴포넌트를 수정해야 합니다.

Jest와 React Testing Library를 사용한 예제:

React Testing Library는 리액트 컴포넌트를 테스트하는 데 있어 더 현대적이고 권장되는 접근 방식입니다. 이는 구현 세부 사항에 집중하기보다는 사용자 관점에서 컴포넌트를 테스트하는 데 중점을 둡니다.

먼저 Jest와 React Testing Library를 설치합니다:

            npm install --save-dev @testing-library/react @testing-library/jest-dom jest

            

              
                Copy
              
            
          

스냅샷 테스트를 수정합니다 (예: Greeting.test.js):

            import React from 'react';
import { render } from '@testing-library/react';
import Greeting from './Greeting';
import '@testing-library/jest-dom/extend-expect';

descibe('Greeting Component', () => {
  it('renders correctly', () => {
    const { asFragment } = render(<Greeting name="World" />);
    expect(asFragment()).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Jest를 사용하여 테스트를 실행합니다:

            npm test

            

              
                Copy
              
            
          

테스트를 처음 실행하면 Jest는 Greeting 컴포넌트의 렌더링된 출력을 포함하는 스냅샷 파일(예: __snapshots__/Greeting.test.js.snap)을 생성합니다.

이후의 테스트 실행은 현재 출력을 저장된 스냅샷과 비교합니다. 일치하면 테스트는 통과합니다. 다르면 테스트는 실패하며, 변경 사항을 검토하고 스냅샷을 업데이트하거나 컴포넌트를 수정해야 합니다.

스냅샷 테스팅 모범 사례

• 스냅샷을 코드로 취급하기: 스냅샷 파일을 다른 코드 파일처럼 버전 관리 시스템(예: Git)에 커밋하세요.
• 변경 사항 신중하게 검토하기: 스냅샷 테스트가 실패하면, 스냅샷 파일의 변경 사항이 의도적인 것인지 버그를 나타내는지 신중하게 검토하세요.
• 의도적으로 스냅샷 업데이트하기: 변경 사항이 의도적인 경우, 새로운 예상 출력을 반영하도록 스냅샷 파일을 업데이트하세요.
• 스냅샷 남용하지 않기: 스냅샷 테스팅은 UI가 비교적 안정적인 컴포넌트에 가장 적합합니다. 자주 변경되는 컴포넌트에 사용하면 불필요한 스냅샷 업데이트가 많이 발생할 수 있으므로 피하세요.
• 가독성 고려하기: 때로는 스냅샷 파일을 읽기 어려울 수 있습니다. Prettier와 같은 도구를 사용하여 스냅샷 파일의 형식을 지정하여 가독성을 높이세요.

언제 스냅샷 테스팅을 사용해야 할까요?

스냅샷 테스팅은 다음과 같은 시나리오에서 가장 효과적입니다:

• 단순한 컴포넌트: 예측 가능한 출력을 가진 간단한 컴포넌트를 테스트할 때.
• UI 라이브러리: 여러 버전에 걸쳐 UI 컴포넌트의 시각적 일관성을 확인할 때.
• 회귀 테스트: 기존 컴포넌트의 의도치 않은 변경을 감지할 때.

통합 테스팅

통합 테스팅이란?

통합 테스팅은 여러 컴포넌트가 함께 작동하여 특정 기능을 달성하는 방식을 테스트하는 것입니다. 애플리케이션의 여러 부분이 올바르게 상호 작용하고 전체 시스템이 예상대로 동작하는지 확인합니다.

개별 컴포넌트에 초점을 맞추는 단위 테스트와 달리, 통합 테스트는 컴포넌트 간의 상호 작용에 중점을 둡니다. 이는 애플리케이션이 전체적으로 올바르게 작동하는지 확인하는 데 도움이 됩니다.

통합 테스팅 구현 방법

여기서도 Jest와 React Testing Library를 사용하여 통합 테스팅을 시연해 보겠습니다.

Input과 Display라는 두 개의 컴포넌트를 가진 간단한 애플리케이션을 만들어 보겠습니다. Input 컴포넌트는 사용자가 텍스트를 입력할 수 있게 하고, Display 컴포넌트는 입력된 텍스트를 표시합니다.

먼저, Input 컴포넌트를 만듭니다 (예: Input.js):

            import React, { useState } from 'react';

function Input({ onInputChange }) {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
    onInputChange(event.target.value);
  };

  return (
    <input
      type="text"
      value={text}
      onChange={handleChange}
      placeholder="Enter text..."
    />
  );
}

export default Input;

            

              
                Copy
              
            
          

다음으로, Display 컴포넌트를 만듭니다 (예: Display.js):

            import React from 'react';

function Display({ text }) {
  return <p>You entered: {text}</p>;
}

export default Display;

            

              
                Copy
              
            
          

이제 Input과 Display 컴포넌트를 통합하는 메인 App 컴포넌트를 만듭니다 (예: App.js):

            import React, { useState } from 'react';
import Input from './Input';
import Display from './Display';

function App() {
  const [inputText, setInputText] = useState('');

  const handleInputChange = (text) => {
    setInputText(text);
  };

  return (
    <div>
      <Input onInputChange={handleInputChange} />
      <Display text={inputText} />
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

통합 테스트를 만듭니다 (예: App.test.js):

            import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';
import '@testing-library/jest-dom/extend-expect';

describe('App Component', () => {
  it('updates the display when the input changes', () => {
    render(<App />);
    const inputElement = screen.getByPlaceholderText('Enter text...');
    const displayElement = screen.getByText('You entered: ');

    fireEvent.change(inputElement, { target: { value: 'Hello, world!' } });

    expect(displayElement).toHaveTextContent('You entered: Hello, world!');
  });
});

            

              
                Copy
              
            
          

Jest를 사용하여 테스트를 실행합니다:

            npm test

            

              
                Copy
              
            
          

이 테스트는 사용자가 Input 컴포넌트에 텍스트를 입력하는 것을 시뮬레이션하고 Display 컴포넌트가 입력된 텍스트로 업데이트되는지 확인합니다. 이는 Input과 Display 컴포넌트가 올바르게 상호 작용하고 있음을 확인합니다.

통합 테스팅 모범 사례

• 핵심 상호 작용에 집중하기: 컴포넌트 간의 가장 중요한 상호 작용을 식별하고 통합 테스트를 거기에 집중하세요.
• 현실적인 데이터 사용하기: 통합 테스트에서 실제와 유사한 데이터를 사용하여 현실적인 시나리오를 시뮬레이션하세요.
• 외부 의존성 모의(Mock) 처리하기: API 호출과 같은 외부 의존성을 모의 처리하여 컴포넌트를 격리하고 테스트의 신뢰성을 높이세요. `msw`(Mock Service Worker)와 같은 라이브러리가 이 작업에 탁월합니다.
• 명확하고 간결한 테스트 작성하기: 이해하고 유지보수하기 쉬운 명확하고 간결한 테스트를 작성하세요.
• 사용자 흐름 테스트하기: 완전한 사용자 흐름을 테스트하는 데 집중하여 애플리케이션이 사용자 관점에서 예상대로 동작하는지 확인하세요.

언제 통합 테스팅을 사용해야 할까요?

통합 테스팅은 다음과 같은 시나리오에서 가장 효과적입니다:

• 복잡한 컴포넌트: 다른 컴포넌트나 외부 시스템과 상호 작용하는 복잡한 컴포넌트를 테스트할 때.
• 사용자 흐름: 완전한 사용자 흐름이 올바르게 작동하는지 확인할 때.
• API 상호 작용: 프론트엔드와 백엔드 API 간의 통합을 테스트할 때.

스냅샷 테스팅 vs. 통합 테스팅: 비교

다음은 스냅샷 테스팅과 통합 테스팅의 주요 차이점을 요약한 표입니다:

올바른 테스트 전략 선택하기

최고의 테스트 전략은 프로젝트의 특정 요구 사항에 따라 다릅니다. 일반적으로, 리액트 컴포넌트가 올바르게 작동하는지 확인하기 위해 스냅샷 테스팅과 통합 테스팅을 조합하여 사용하는 것이 좋습니다.

• 단위 테스트로 시작하기: 스냅샷이나 통합 테스트를 시작하기 전에, 개별 컴포넌트에 대한 좋은 단위 테스트가 있는지 확인하세요.
• UI 컴포넌트에 스냅샷 테스트 사용하기: UI 컴포넌트의 시각적 일관성을 확인하기 위해 스냅샷 테스트를 사용하세요.
• 복잡한 상호 작용에 통합 테스트 사용하기: 컴포넌트들이 올바르게 상호 작용하고 애플리케이션이 예상대로 동작하는지 확인하기 위해 통합 테스트를 사용하세요.
• 종단 간(E2E) 테스트 고려하기: 중요한 사용자 흐름에 대해서는 Cypress나 Playwright와 같은 도구를 사용하여 실제 사용자 상호 작용을 시뮬레이션하고 전체 애플리케이션 동작을 확인하는 종단 간 테스트를 추가하는 것을 고려하세요.

스냅샷과 통합 테스트를 넘어서

스냅샷과 통합 테스트는 중요하지만, 리액트 컴포넌트에 대해 고려해야 할 유일한 테스트 유형은 아닙니다. 다음은 염두에 두어야 할 다른 테스트 전략들입니다:

• 단위 테스트: 앞서 언급했듯이, 단위 테스트는 개별 컴포넌트를 격리하여 테스트하는 데 필수적입니다.
• 종단 간(E2E) 테스트: E2E 테스트는 실제 사용자 상호 작용을 시뮬레이션하고 전체 애플리케이션 동작을 확인합니다.
• 속성 기반 테스트: 속성 기반 테스트는 컴포넌트에 대해 항상 참이어야 하는 속성을 정의한 다음, 해당 속성을 테스트하기 위해 무작위 입력을 생성하는 방식입니다.
• 접근성 테스트: 접근성 테스트는 컴포넌트가 장애를 가진 사용자에게 접근 가능한지 확인합니다.

결론

테스팅은 견고하고 신뢰할 수 있는 리액트 애플리케이션을 구축하는 데 필수적인 부분입니다. 스냅샷 및 통합 테스팅 기술을 마스터함으로써 코드의 품질을 크게 향상시키고, 회귀를 방지하며, 변경 사항을 적용하는 데 자신감을 높일 수 있습니다. 각 컴포넌트에 맞는 올바른 테스트 전략을 선택하고, 포괄적인 커버리지를 보장하기 위해 다양한 유형의 테스트를 조합하여 사용하는 것을 기억하세요. Jest, React Testing Library, 그리고 Mock Service Worker (MSW)와 같은 도구를 통합하면 테스트 워크플로우를 간소화할 수 있습니다. 항상 사용자 경험을 반영하는 테스트를 작성하는 것을 우선시하세요. 테스트 문화를 수용함으로써 전 세계 사용자에게 훌륭한 사용자 경험을 제공하는 고품질 리액트 애플리케이션을 구축할 수 있습니다.