StudyTDD

[TDD] 04 - 테스트 시작

TDD
  1. Describe it
  2. Make it fail
  3. Make it green
  4. Refactoring (Optional)

이제 환경 구성을 마치고 본격적으로 테스트를 시작한다.

제일 먼저 시작해야할 것은 개발할 앱의 구성 요소를 빠르게 스케치하고, 컴포넌트를 정의하는 것이다. 예를 들어 이번 스터디에서 우리가 타겟으로 하는 앱이 Todo-list 앱 이라면 다음과 같이 1 단계를 시작한다.

01. Describe it

  1. 앱에서 요구되는 기능은 무엇인가?
  2. 그 기능들을 어떻게 구현할 것인가?
  3. 컴포넌트 정의
  4. 컴포넌트 배치

빠른 스케치;;

우선 이런 식으로 디자인(?) 및 컴포넌트 정의를 한다.

02. Make it fail

가장 강조되는 부분이다. 우선 실패해야한다. 우리 머릿속에 이미 앱이 있지만 먼저 구현하고 테스트 하는 것이 아니라, 테스트를 통해 실패한 후 테스트를 통과시키기 위한 구현 작업이 되야한다.

테스트 코드 작성

1
2
3
4
5
6
7
8
9
// /__tests__/App-test.js
...
describe('App', () => {
  // Header Text
  const wrapper = shallow(<App />);
  it('is Text visiable? ', () => {
    expect(wrapper.find('Text').contains('ToDo TDD')).toBe(true);
  });
});

위의 코드는 다음과 같이 해석된다.

  • App 컴포넌트에서 Text 컴포넌트를 찾아 그 안의 값이 "ToDo TDD"가 되는가?

결과는 다음과 같다.

1
2
3
4
5
6
7
expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false
...
Test Suites: 1 failed, 1 total	// red
Tests:       1 failed, 1 total	// red

기대값은 true이지만 결과값은 false이다.
이렇게 공포의 빨간 실패로 불리는 fail을 만들었다.

03. Make it green

좋아. 이제 무슨 수를 써서라도 테스트를 통과시키면 된다. App 의 Text 컴포넌트의 값만 맞으면 된다.

테스트 통과를 위한 컴포넌트 작성

1
2
3
4
5
6
7
8
// src/App.js
...
const App = () => {
  return (
    <Text>ToDo TDD</Text>
  )
}
...

결과는 다음과 같다.

1
2
Test Suites: 1 passed, 1 total	// green
Tests:       1 passed, 1 total	// green

이러한 방식으로 Make it fail > Make it green 의 반복을 통해 개발을 해나가는 것을 Test Driven Development 라고 한다.

나머지 테스트도 작성

1
2
3
4
5
6
7
8
9
10
11
// src/App.js
...
// AddToDo
it('is AddToDo visable?', () => {
  expect(wrapper.find('AddToDo')).toHaveLength(1);
});

// ToDoList
it('is ToDoList visable?', () => {
  expect(wrapper.find('ToDoList')).toHaveLength(1);
});
공유하기