TDD 배운내용 정리

🔎 TDD(Test-driven Development)

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

Wirte Failing Test : 실패 테스트 코드 작성
Make Test Pass : 테스트를 패스할 코드 작성
Refactor : 중복코드 제거, 리팩토링

TDD 사용 장점

• 예상하지 못했던 버그를 줄여 소요 시간을 줄일 수 있다.
• 버그를 줄여 보다 효과적인 코드를 짤 수 있다.
• 중복된 코드를 제거할 수 있다.

🔎 리액트 TDD

Testing Library, Jest 를 이용해서 할 수 있다.

Testing Library는 create-react-app을 이용하여 React 프로젝트를 생성하면 자동으로 Testing Libarary를 이용할 수 있고, 컴포넌트나 클릭 이벤트등 다양한 곳에 사용할 수 있다.

Jest는 JavaScript의 Testing Framework / Test Runner로써, 테스트 파일을 자동으로 찾아 테스트를 실행하고, 함수로 테스트를 체크하여 테스트가 성공인지 실패인지를 판단해 준다.

사용법

$ npx create-react-app my-app

CRA를 하고 package.json 파일 안에 자동으로 설치되는데, @testing-library 3개가 테스트 수행하는 라이브러리이다.

/jest-dom : Jest-dom 제공하는 custom matcher를 사용할 수 있게 해준다.
/react : 컴포넌트의 요소를 찾기 위한 query가 포함되어 있다.
/user-event : click 등 사용자 이벤트에 이용된다.

# 테스트 명령어
$ npm run test

간단한 테스트 코드 작성

test, it, describe 함수를 사용하고, expect().toBe() 로 확인한다.
함수의 인자로는 2개를 받는다. 인자1 뭐하는 테스트인지 설명할 string, 테스트할 콜백함수
describe 함수 블록은 Test Suites라고 불리며 test/it 함수 블록은 Test(Test Case)라고 한다.

test('올바르게 계산하는 테스트입니다', () => {
	expect(15 + 15 ).toBe(30)
})

it('2 곱하기 2가 4인 테스트', () => {
	expect(2 * 2 ).toBe(4)
})

//describe 를 사용하면 여러 케이스 작성이 가능하다.

describe('여러 테스트들', () => {
  it('올바르게 계산하는 테스트입니다', () => {
      expect(15 + 15 ).toBe(30)
  })

  it('2 곱하기 2가 4인 테스트', () => {
      expect(2 * 2 ).toBe(4)
  })
})

npm run test 를 실행하여 바르게 작성한 경우와 틀린경우

❗️ 컴포넌트 테스트하기