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를 시작하면 안된다는 것. - 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 |