[Testing] TDD

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

TDD

TDD는 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론이다.

이전에 친구랑 같이 프로젝트할때 프론트 백 둘다 자기만의 테스트를 만들어서 돌려 봐야한다 말했는데 그때는 알지못한걸 배우게 되서 감격스럽다...

TDD를 통해 소프트웨어를 개발한다는 것은 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미한다.

 

TDD는 다음 3단계를 거친다.

1. Write Failing Test: 실패하는 테스트 코드를 먼저 작성한다.
2. Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성한다.
3. Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행한다.

이 과정에서 1의 과정을 마치기 전에 2의 작업을 시작하지 않도록 해야한다.

또한 2를 진행할 때에는 1의 테스트를 통과할 정도의 최소 코드만 작성해야한다.

테스트를 먼저 작성하는 것은 필연적으로 코드를 어떨게 구성할지 좀ㄴ하게 된다는 것을 의미하고, 결과적으로 버그가 더 적은 코드를 짤수 있게 된다. 또한 불필요한 설계를 피할수 있고, 테스트 코드의 요구 사항에 집중할 수 있게 된다. 일반적으로 TDD를 따라 소프트웨어를 개발하는 경우 그렇지 않은 경우보다 결함을 50 ~ 90%까지 감소 시킬수 있다.

TDD를 사용하는 이유

실제 개발을 할때 TDD를 따르는개발자가 많지 않다고 한다. 개발자의 대부분이 테스트를 작성하고 만드는 것 보다, 만들어야 하는 것을 바로 코드로 작성하는 편이 자연스럽고, 빠르다고 느끼기 때문이다. 그래도 사용해야 한다고 말하는 이유는 오히려 TDD를 사용하는 편이 효율적이고 더 빠를수 있기 때문이다. 코드를 작성하기 전 TDD를 작성하는 일은 시간이 소요되지만 오히려 예상치 못한 버그를 줄이기 때문에 시간 소요를 줄일수 있다.

 

React와 TDD

npx create-react-app로 react앱을 생성해보자

App.test.js를 보았을 것이다.

이들은 npm run test를 사용하면 동작이 가능하다.

간단한 테스트 만들기

src폴더에 sample.test.js라는 파일을 생성했습니다.

테스트를 실행하기 위해서는 파일명을 <파일명>.test.js와 같이 해주면 된다.(<파일명>.spec.js에서도 가능하다.)

파일명을 이렇게 짓고 테스트를 작성하면, Jest가 테스트 파일로 판단하여 작동합니다.

 

Jest는 JavaScript의 Testing Framework / Test Runner로써, 테스트 파일을 자동으로 찾아 테스트를 실행하고, 테스트를 실행한 결과 기대만큼 올바른 값을 가지고 있는지 함수를 이용하여 체크하여 테스트가 성공인지 실패인지를 판단해 줍니다.

 

간단한 덧셈 테스트를 만들어 보겠습니다. 테스트는 test함수 안에 쓰고 test 함수의 첫 번째 인자에는 테스트에 대한 설명을, 두 번째 인자에는 테스트의 내용을 함수의 형태로 작성한다.

test('2 더히기 2는 4이다',()=>{
    expect(2+2).toBe(4);
})

이제 npm run test를 실행 하겠습니다.

정상적으로 잘 작동이 됩니다~

 

덧셈을 일부러 틀리겠습니다

test('2 더히기 2는 5이다',()=>{
    expect(2+2).toBe(5);
})

다음과 같이 src/sample.test.js에서 에러가 발생했다는것을 알려 주고, 어디서 문제가 있는지 알려줍니다.

 

test 함수 대신 it 함수를 사용해도 같은 결과가 나옵니다. 또 describe함수를 사용하면 it함수나 test함수를 하나의 파일에 여러 개 포함할 수 있습니다.

 

test와 it은 동일한 작업을 수행합니다. it은 test의 별칭입니다.

간단한 덧셈들 성공한 경우

describe('간단한 덧셈을 해봅시다 ~', () => {
    it('2 더히기 2는 4이다', () => {
        expect(2 + 2).toBe(4);
    });

    it('1 더히기 2는 3이다', () => {
        expect(1 + 2).toBe(3);
    });
})

간단한 덧셈들 실패한 경우

describe('간단한 덧셈을 해봅시다 ~', () => {
    it('2 더히기 2는 0이다', () => {
        expect(2 + 2).toBe(0);
    });

    it('1 더히기 2는 0이다', () => {
        expect(1 + 2).toBe(0);
    });
})

친절한다

 ● 간단한 덧셈을 해봅시다 ~ › 2 더히기 2는 0이다

어떤 describe의 it에서 오류가 나타나는지 알려준다