TDD로 React 프론트앤드 개발하기(feat. VS Code)

VS Code에서 React 프론트엔드 개발을 진행하면서 TDD(Test-Driven Development)를 적용하는 것은 충분히 가능합니다. TDD는 코드 작성을 시작하기 전에 테스트를 먼저 작성하고, 그 테스트가 통과할 수 있도록 코드를 작성하는 개발 방법론입니다. React 프로젝트에서 TDD를 적용하려면 여러 가지 도구와 테스트 프레임워크를 사용할 수 있습니다. 아래는 TDD를 적용하는 방법과 주요 도구에 대한 설명입니다.

테스트 주도 개발

1. TDD 개발 흐름

TDD 개발 흐름은 다음과 같습니다:

1. 테스트 작성: 테스트 케이스를 먼저 작성합니다. (테스트는 실패 상태로 시작합니다.)
2. 코드 작성: 테스트를 통과할 수 있는 최소한의 코드를 작성합니다.
3. 리팩토링: 코드를 개선하거나 성능을 최적화하면서 테스트를 지속적으로 통과하도록 만듭니다.

이 과정을 반복하면서 새로운 기능을 추가하거나 기존 기능을 개선해 나갑니다.

---

2. TDD 적용을 위한 주요 도구

1. Jest
   • 개요: Jest는 Facebook에서 만든 JavaScript 테스트 프레임워크로, React 애플리케이션에서 많이 사용됩니다. 특히 스냅샷 테스트와 함께 컴포넌트의 동작을 검증하기에 유용합니다.
   • 설치 방법:React 프로젝트의 기본 설정에 포함되어 있기도 합니다.

     npm install --save-dev jest

   • 테스트 예시:

     // sum.test.js
     function sum(a, b) {
       return a + b;
     }
     
     test('adds 1 + 2 to equal 3', () => {
       expect(sum(1, 2)).toBe(3);
     });

      
   • 장점: 간편한 설정, 빠른 테스트 실행 속도, 모킹(mocking) 및 비동기 테스트에 강력한 지원 제공.
   • VS Code 플러그인: Jest 플러그인을 사용하면 테스트 상태가 에디터 내에서 바로 시각적으로 표시됩니다.
     • 플러그인 설치: Jest 플러그인
2. React Testing Library
   • 개요: React 컴포넌트의 UI를 테스트하는 라이브러리로, 컴포넌트가 사용자 인터페이스에서 어떻게 동작하는지를 테스트할 수 있도록 설계되었습니다.
   • 설치 방법:
     

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

      
   • 테스트 예시:

     import { render, screen } from '@testing-library/react';
     import App from './App';
     
     test('renders learn react link', () => {
       render(<App />);
       const linkElement = screen.getByText(/learn react/i);
       expect(linkElement).toBeInTheDocument();
     });

      
   • 장점: 실제 사용자 관점에서 컴포넌트가 어떻게 동작하는지를 테스트할 수 있음.
   • VS Code 플러그인: Testing Library 전용 플러그인은 없지만, Jest 플러그인과 함께 사용할 수 있습니다.
3. Cypress
   • 개요: Cypress는 주로 E2E(End-to-End) 테스트에 사용되는 도구이지만, 유닛 테스트와 통합 테스트에도 사용할 수 있습니다. 특히 브라우저 내에서 테스트를 실행하는 환경을 제공해 실제 사용자가 보는 것과 같은 환경에서 테스트를 진행할 수 있습니다.
   • 설치 방법:설치 후, npx cypress open 명령을 사용해 Cypress 대시보드를 열 수 있습니다.

     npm install cypress --save-dev

   • 테스트 예시:

     describe('My First Test', () => {
       it('Does not do much!', () => {
         expect(true).to.equal(true);
       });
     });

      
   • 장점: 시각적인 테스트 러너 제공, 다양한 브라우저 테스트 지원, 디버깅 도구 내장.
   • VS Code 플러그인: Cypress 전용 플러그인을 설치하면 Cypress 환경을 좀 더 편리하게 사용할 수 있습니다.
     • 플러그인 설치: Cypress 플러그인
4. Enzyme
   • 개요: React 컴포넌트의 상태와 이벤트를 쉽게 테스트할 수 있도록 도와주는 JavaScript 테스트 유틸리티로, 컴포넌트를 "shallow rendering" 하거나 "전체 DOM"을 렌더링하는 등 다양한 방식으로 테스트할 수 있습니다.
   • 설치 방법:

     npm install --save-dev enzyme enzyme-adapter-react-16

      
   • 테스트 예시:

     import { shallow } from 'enzyme';
     import App from './App';
     
     test('renders learn react link', () => {
       const wrapper = shallow(<App />);
       expect(wrapper.find('a').text()).toContain('Learn React');
     });

      
   • 장점: 컴포넌트의 내부 구조를 세밀하게 테스트할 수 있음. 컴포넌트의 상태와 속성 값을 쉽게 접근 가능.
   • 단점: 현재 React Testing Library에 밀려 커뮤니티 지원이 점점 줄어드는 추세입니다.
   • VS Code 플러그인 지원 여부: Jest 플러그인과 함께 사용할 수 있습니다.

---

3. 테스트 자동화 전략

VS Code와 GitHub Actions, Jenkins 등의 CI/CD 도구를 활용하면 테스트 자동화 파이프라인을 구축할 수 있습니다.

1. GitHub Actions를 통한 자동화:
   • GitHub Actions를 사용하면 코드를 푸시하거나 PR을 생성할 때 자동으로 테스트를 실행할 수 있습니다.
   • 설정 파일 예시: .github/workflows/main.yml

     name: CI
     
     on:
       push:
         branches:
           - main
       pull_request:
         branches:
           - main
     
     jobs:
       build:
         runs-on: ubuntu-latest
         steps:
           - uses: actions/checkout@v2
           - name: Set up Node.js
             uses: actions/setup-node@v2
             with:
               node-version: '14'
           - run: npm install
           - run: npm test

      
2. Jenkins를 사용한 자동화:
   • Jenkins에서 NPM 명령어를 통해 테스트를 자동화할 수 있습니다.
     

     npm install npm test

      

      

---

4. TDD 적용 시 장단점

장점:

• 코드 품질 향상: 테스트 코드를 먼저 작성하면서 코드의 품질이 개선되고, 예기치 않은 오류를 미리 방지할 수 있습니다.
• 디버깅 용이: 테스트가 실패할 경우, 어떤 부분에서 문제가 발생했는지 즉각적으로 알 수 있습니다.
• 유지보수 효율성: 리팩토링 시 테스트 코드를 통해 기존 기능이 정상 동작하는지를 쉽게 확인할 수 있습니다.

단점:

• 추가 작업 시간 소요: 테스트 코드를 먼저 작성하는 과정에서 시간이 더 소요될 수 있습니다.
• 초기 학습 곡선: Jest, Cypress 등 다양한 테스트 도구를 익히는 데 시간이 필요할 수 있습니다.
• VS Code 플러그인 사용 시: 다양한 테스트 도구와의 통합이 가능하지만, 여러 플러그인을 동시에 관리해야 할 수 있습니다.