[TIL] #29. TDD : 테스트 하면서 개발하기

2022.8.4. (목)

1. 오늘의 소감

• 오늘 진도는 TDD~! 과제 때 매일 봐오던 test 케이스들을 직접 작성해보는 시간이었다. 오늘 과제는 진짜 재밌었다!! 처음에는 굳이 번거롭게 test 작성까지 해가며 코딩을 해야할까 싶었는데, 신기하게도 test 를 작성해보면서 잡는 버그들도 꽤 되고, 내가 만들어둔 test 를 통과할 때의 쾌감이 있다! 초록불빛의 PASS… 중독적이야….
• 사실 코딩 중간중간 console.log 를 찍어보는 것도 일종의 TDD라고 할 수 있다. 하지만 매번 찍어보고 지우는 게 번거롭기도하고, console.log 찍어논 뒤 지우는 걸 까먹고 빌드하면 나중에 곤란해지기도 한다… 이제 콘솔만 찍어보는 것에서 졸업하고 test 파일 작성해서 체계적으로 관리해보자. 이 편이 더 개발자스럽기도 하고ㅎㅎ
• 무엇보다 미리 테스트를 작성해놓으면 좋은 점은 후속 버그를 쉽게 발견한다는 거다. 즉, 코드를 수정했을 때, 이전 구현에서 문제가 생기는 것을 체크할 수 있다는 게 좋았다. 예를 들어, 1-2-3 단계 구현을 마치고 마지막 4단계를 구현했다고 하자. 4단계에서 원하는 구현은 되었지만 이 과정에서 코드 수정이 일어나며 1-2-3 구현에 버그가 생겼다! 만약 테스트 코드가 없었다면 이걸 나중에 발견해서 고치느라 애먹었을 것이다.

2. 학습한 키워드

• TDD 3단계
• Mocha 프레임워크, it, test, describe, Chai, expect, should, 리액트에서 테스트 하게 해주는 두 모듈 : TestingLibrary, Jest

3. 키워드를 바탕으로 학습 내용 설명해보기

• TDD는 총 3단게로 이루어진다.
  1. 실패하는 테스트 코드를 작성한다.
  2. 테스트를 성공시키기 위한 실제 코드를 작성한다.
  3. 코드 리팩토링
  → 다시 1로 돌아간다.
  → 이 때, 중요한 점은 1의 과정을 마치기 전까지 2를 시작하면 안된다는 것.
• Mocha 에서 테스트 코드 작성하기

describe("Introduction to Mocha Tests - READ ME FIRST", function() {
  it("오류가 발생하지 않으므로, 실패하지 않습니다.", function() {
    let even = function(num) {
      return num % 2 === 0;
    };
    return even(10) === true;
  });

  // 예상 동작이 실제 동작과 다르다면, 테스트는 실패해야 합니다.
  it("예상 동작이 실제 동작과 일치하지 않을 때 오류가 발생합니다.", function() {
    let even = function(num) {
      return num % 2 === 0;
    };

    if (even(10) !== true) {
      throw new Error("10은 짝수여야 합니다!");
    }
  });

	//Chai 라이브러리 사용하기
	let expect = chai.expect;
	
	it("has a prefix of 51 and a length of 16", function() {
	  expect(detectNetwork("5112345678901234")).to.equal("MasterCard");
	});

});

• TestingLibrary, Jest 코드 작성하기 (둘다 리액트에서만 쓸 수 있는 건 아니다)

describe('간단한 테스트', () => {
    test('2더하기 2는 4', () => {
        expect(2 + 2).toBe(4);
    });

    it('2 빼기 1은 1', () => {
        expect(2 - 1).toBe(1);
    })
    
})

//test 함수와 it 함수는 역할이 같다.
//describe 함수를 사용하면 it 이나 test 함수를 하나 파일에 여러 개 포함할 수 있다.
//describe 함수 블록은 Test Suites 라고 불린다. 
//test/it 함수 블록은 Test(TestCase) 라고 불린다.
//toBe() : expect 함수에서 지정한 값이 toBe 함수에 지정한 값과 일치하는지 체크.