누코(nuuco)
오늘도 코딩
누코(nuuco)
전체 방문자
오늘
어제
  • 분류 전체보기
    • TIL
    • 에러 노트
    • 자료구조 & 알고리즘
    • 프로그래밍
    • 프로젝트
    • 한컷코딩
    • 글

공지사항

  • 🚚 (전)노션 ➡️ (현)티스토리로 블로그 이사 오는 중(⋯

최근 글

인기 글

최근 댓글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
누코(nuuco)
TIL

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

TIL

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

2022. 12. 6. 03:50

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 함수에 지정한 값과 일치하는지 체크.

 

 

728x90
반응형

'TIL' 카테고리의 다른 글

[TIL] #30. Optimization  (0) 2022.12.14
[TIL] #28. graphQL  (0) 2022.12.06
[TIL] #27. 커스텀 컴포넌트  (0) 2022.12.06
[TIL] #26. 피그마 마무리 & 피그잼으로 UI / UX 분석  (0) 2022.12.06
[TIL] #25. 피그마로 디자인 & 프로토타이핑  (0) 2022.12.06
  • 1. 오늘의 소감
  • 2. 학습한 키워드
  • 3. 키워드를 바탕으로 학습 내용 설명해보기
'TIL' 카테고리의 다른 글
  • [TIL] #30. Optimization
  • [TIL] #28. graphQL
  • [TIL] #27. 커스텀 컴포넌트
  • [TIL] #26. 피그마 마무리 & 피그잼으로 UI / UX 분석
누코(nuuco)
누코(nuuco)
👩🏻‍💻 예비 프론트엔드 개발자 😎 글 쓰고, 그림 그리고, 코딩하는 것을 좋아합니다✨

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.