TDD (Test Driven Development)와 단위 테스트

---

TDD (Test Driven Development)

 

TDD란, 테스트 코드 작성 - 테스트 - 구현(리팩토링) 단계로 이루어지는

 사이클을 반복하는 개발 프로세스 중 하나이다. 

 

 

 

---

 

TDD의 장점

• 구현 단계 이전에 기능 시나리오에 대한 검토가 이루어지면서, 양질의 코드품질 토대가 될 수 있음
• 자연스럽게 기능 단위의 최적화가 이루어 지며, 자연스러운 모듈화가 이루어짐
• 디버깅, 리팩토링에 유리함

 

어떻게 Javascript / React 웹 개발 프로젝트에 TDD를 적용하는가

 

1. JEST

페이스북에서 만든 JavaScript 테스트 프레임워크로, 테스트 케이스를 만들거나, 결과값을 처리하는 api를 제공하여 

쉽고 간결하게 유닛 테스트를 할 수 있다.

test('덧셈 케이스', () => { //test() :  새로운 테스트 케이스를 만드는 함수
    expect(sum(1, 2)).toBe(3); //expect( 함수 ).toBe( 예상 결과 값 ) - *Mather 함수
  });

 

 

2. Eenzyme 

리액트 컴포넌트 단위로 테스팅이 가능한 테스팅 라이브러리

 

1. 현재 랜더링 결과가 이전 랜더링 결과와 일치하는지 확인하는 스냅샷 테스팅을 지원한다.

describe('<Apps />', () => {
  it('스냅샷 확인', () => {
    const comp = mount(<Apps />);
    expect(comp).toMatchSnapshot(); //toMatchSnapshot : 기존 스냅샷과 일치하는이 체크
  });
});

 

2. 컴포넌트의 props 혹은 인스턴스에 접근하여 테스팅 할 수 있다.

describe('<APP />', () => {
    it('Props 확인', () => {
      const comp = mount(<App value={"hello"} />); //const compo 에 랜더링 결과가 담김
      expect(comp.props().value).toBe('Hello');
    });
  });

 

3. Hooks 코드 검토도 지원한다.

it('추가 버튼 클릭 테스트', () => {
        const comp = mount(<App />);
        
        //버튼을 가져옴
        let thisButton = comp.findWhere(
          node => node.type() === 'button' && node.text() === '추가'
        );
        //버튼을 클릭
        thisButton.simulate('click');
        //결과 값이 담긴 p 태그를 가져옴
        const result = comp.findWhere(
            node => node.type() === 'p' && node.text() === '결과'
          );
          //결과에 무엇이 담겼는가확인
        expect(result.text()).toBe('추가됨');
        });