티스토리 뷰

1. TDD(Test-Driven Development) 이란?

  • 일반적인 개발 프로세스
    • 일반적으로 개발 절차는 먼저 어떻게 개발할지 디자인하고 디자인을 바탕으로 실제 코드를 작성하고 최종적으로 테스트를 작동시켜보면서 개발하는 과정이다.

일반적인 개발 프로세스

  • TDD(Test-Driven-Development)
    • 정확한 프로그래밍 목적을 디자인 단계에서 반드시 미리 정의해야만 하고 또 무엇을 미리 정의해야 한다.
    • RED : 실패하는 테스트를 만들기
    • GREEN : 테스트에 통과할 만한 작은 코드를 작성하기
    • REFACTOR : 반복되는 코드, 긴 메소드, 큰 클래스, 긴 매개변수 목록 등등 코드를 좀 더 효육적으로 바꾸기
    • 개발하는 과정에서 Test Script를 작성하고 코드를 Refactoring 했다는 점이 중요하다!!

TDD 개발 방법론

2. TDD 의 3가지 절차

  • 실패(RED)
    • 첫번째 절차는 실패이다. 이는, 실패하는 테스트 케이스를 먼저 만들라는 것이다. 실패하는 테스트 케이스를 만들 때는 프로젝트의 전체 기능에 대하여 처음부터 모든 테스트 케이스를 작성하는 것이 아니라, 지금 가장 먼저 구현할 기능 하나씩 테스트 케이스를 작성한다.
    • 개발팀/상황에 따라 한꺼번에 여러 테스트 케이스를 먼저 작성하기도 한다.
  • 성공(GREEN)
    • 두번째 절차는 성공이다. 우리가 작성하는 실패하는 테스트 케이스를 통과시키기 위하여, 코드를 작성하여 테스트를 통과시키는 것이다.
  • 리팩토링(REFACTOR)
    • 세번째 절차는 리팩토링이다. 우리가 구현한 코드에 중복되는 코드가 있거나, 혹은 더 개선시킬 방법이 있다면 리팩토링을 진행합니다. 리팩토링을 진행하고 나서도 테스트 케이스가 성공하는지 확인합니다. 이 절차가 끝났다면, 다시 첫번째 절차로 돌아가서 다른 기능 구현을 위하여 새로운 실패하는 테스트 케이스를 작성하면 된다.

2019/09/02 - [Development] - [DEVELOPMENT] Refactoring이란?

 

[DEVELOPMENT] Refactoring이란?

1. Refactoring 이란 무엇인가? Refactoring은 외부 동작을 바꾸지 않으면서 내부 구조를 개선하는 방법으로, SW 시스템을 변경하는 프로세스이다. Refactoring시 중요한 점 소프트웨어를 보다 이해하기 쉽고, 수..

hwan1001.tistory.com

3. Jest 란?

  • Jest는 단순성에 중점을 둔 JavaScript Testing Framework 이다.
  • Babel, TypeScript, Node, React, Angular, Vue 등을 사용하여 프로젝트와 함께 작동한다.
  • 페이스북에서 만든 테스트 프레임 워크.

4. Jest 설치 

  • Nodejs가 설치되었다면, 빠르게 테스트를 진행 할 수 있다. 만약 설치가 되어 있지 않다면 사이트에 방문하여 설치 후 아래의 명령을 실행 하면 된다.
  • create-react-app 명령을 통해 프로젝트를 먼저 생성해 준다.
  • 프로젝트를 생성했다면 다음 명령을 이용해 트로젝트를 초기화 하고 npm 명령을 통해 Jest를 설치 해 준다.
npm init
npm install --save-dev jest
  • 위 명령이 모두 완료가 되었다면 package.json 파일에서 scripts 프로퍼티에 명령어를 다음과 같이 추가 한다.
// package.json

{
   ...
   "scripts" : {
  	 "test" : "jest --watchAll --verBose"
   }
   ...
}

5. 예제1

  • sum.js
function sum(a, b) {
    // return a - b;
    return a + b;
    // return a*b;
}

module.exports = sum;
  • sum.test.js
const sum = require('./sum');

test('1 + 2 = 3', () => {
    expect(sum(1, 2)).toBe(3);
})

it('calculates 1 + 2', () => {
    expect(sum(1, 2)).toBe(3);
})

- test() : 새로운 테스트 케이스를 만드는 함수

- it() : test()와 똑같지만, 케이스 설명을 영어로 작성하게 되는 경우, "말이 되게" 작성 할 수 있음

- expect() : 특정 값을 예상하여 사전에 정의하고, 통과하면 성공시키고 통과하지 않으면 테스트를 실패시킨

- toBe(정한값) : 특정 값이 내가 정한 값과 일치하는지 확인 해줌

  • 실행결과

- 2 failed, 1 failed의 경우 sum.test.js의 파일 말고 다른 파일도 존재하는데 그것을 주석 처리를 해 놓아서 발생하는 failed로 신경 쓰지 않아도 된다.

실패 했을 경우
성공했을 경우

 

6. 예제2(예제1에 기능 추가)

  • sum.js
function sum(a, b) {
    // return a - b;
    return a + b;
    // return a*b;
}

function sumOf(numbers) {
    let result = 0;
    numbers.forEach(n => {
        result += n;
    });
    return result;
}
// 내보내기
// module.exports = sum;

// 각각 내보내기
exports.sum = sum;
exports.sumOf = sumOf;
  • sum.test.js
const {sum, sumOf} = require('./sum');

// describe() : 여러 테스트 케이스를 묶어서 사용 가능하도록 하는 함수
describe('sum', () =>{
    it('calculates 1 + 2', () => {
        expect(sum(1, 2)).toBe(3);
    })

    it('calculates all numbers', () => {
        const array = [1, 2, 3, 4, 5];
        expect(sumOf(array)).toBe(15);
    })
})
  • 실행결과

- 2 failed, 1 failed의 경우 sum.test.js의 파일 말고 다른 파일도 존재하는데 그것을 주석 처리를 해 놓아서 발생하는 failed로 신경 쓰지 않아도 된다.

성공 했을 경우

- expect(sumOf(array)).toBe(10); 으로 수정을 하게 되면 'Tests:' 의 결과가 1 failed, 1 passed가 될 것이다.

 

7. 예제3(예제2에서 리팩토링 하기)

  • sum.js
function sum(a, b) {
    // return a - b;
    return a + b;
    // return a*b;
}

function sumOf(numbers) {
    // let result = 0;
    // numbers.forEach(n => {
    //     result += n;
    // });
    // return result;

    // Refactoring
    return numbers.reduce((acc, cur) => acc + cur, 0)
}
// 내보내기
// module.exports = sum;

// 각각 내보내기
exports.sum = sum;
exports.sumOf = sumOf;
  • sum.test.js
const {sum, sumOf} = require('./sum');

// describe() : 여러 테스트 케이스를 묶어서 사용 가능하도록 하는 함수
describe('sum', () =>{
    it('calculates 1 + 2', () => {
        expect(sum(1, 2)).toBe(3);
    })

    it('calculates all numbers', () => {
        const array = [1, 2, 3, 4, 5];
        expect(sumOf(array)).toBe(15);
    })
})
  • 실행결과

- 예제 2와 실행결과가 동일하다.

성공 했을 경우

- expect(sumOf(array)).toBe(10); 으로 수정을 하게 되면 'Tests:' 의 결과가 1 failed, 1 passed가 될 것이다.

 

 

 

 

2019.09.02(월)

TDD(Test-driven Development) 테스트 주도 개발방법론

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
TAG
more
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함