TDD 도전해보자.(1) - React Testing Library ? Jest ?

TDD를 적용해야 하는 일이 생겨서 공부를 시작했는데, React 에는 이미 Testing Library 가 존재한다고 한다!? 

# React Testing Library 

✔️ 설치 방법도 기존 CRA와 똑같다!

그리고 설치가 끝나면 npm test 명령어에 대한 설명이 기재되어있었다...! 

✔️ npm test 를 실행하면, 아래와 같이 명령어들이 나온다. 

a를 실행하면...! App.test.js 가 실행되고, Pass 되는 것을 볼 수 있다.

✔️ 그럼? App.test.js 에서 무엇을 테스트한 것일까?   

( App.test.js 파일은 그저 매번 CRA 설치 후 삭제했던 파일이었지 어떤 파일인지는 알아보지 않았었다.😮‍💨 ) 

App.test.js

App.js

test('renders learn react link', () => {
  render(<App />); // App 컴포넌트가 랜더링 된다. 
  const linkElement = screen.getByText(/learn react/i); 
  // "learn react" 텍스트를 가지고 있는 element 를 linkElement 변수에 할당.
  expect(linkElement).toBeInTheDocument(); 
  // 해당 element 가 App document 에 들어있는지 확인.
});

생성한 버튼이  "버튼" 인지 확인하는 테스트 코드

# 그럼 Jest 는 ? 

나는 Jest 를 사용한 단위 테스트를 해야 했기에, Jest를 알아보자.

근데 이미 CRA 에는 Jest 이 같이 설치되어 있다........?

 

그럼 React Testing Library = Jest ...? 🤔

 

# React Testing Library 와 Jest는 상호보완 관계! 🤝

Jest 공식문서에서 둘의 관계를 확인할 수 있었다.

##  expect 

expect 는 값을 테스트할 때 사용된다. 다만, 혼자 사용되지 않고 matcher 과 함께 사용된다.

##  matchers  

여러 방법으로 값을 테스트하는 메서드라고 이해하였다. 

예를 들어

toBe 메서드는 === 이라고 한다. 코드를 실행해서 확인해보자! 

값이 같으면 pass

값이 다르면 fail

matcher 는 아래 공식문서를 통해 확인할 수 있다! 

Jest · 🃏 Delightful JavaScript Testing

# 그럼 마지막으로  단위 테스트에 대해 알아보자.

단위 테스트는 하나의 모듈을 기준으로 테스트하는 것이다. 

그럼 개발 순서는 어떻게 해야할까?

TDD 개발주기

1. 실패하는 작은 단위 테스트를 작성한다. 처음에는 컴파일조차 되지 않을 수 있다.
2. 빨리 테스트를 통과하기 위해 프로덕션 코드를 작성한다. 이를 위해 정답이 아닌 가짜 구현 등을 작성할 수도 있다.
3. 그 다음의 테스트 코드를 작성한다. 실패 테스트가 없을 경우에만 성공 테스트를 작성한다.
4. 새로운 테스트를 통과하기 위해 프로덕션 코드를 추가 또는 수정한다.
5. 1~4단계를 반복하여 실패/성공의 모든 테스트 케이스를 작성한다.
6. 개발된 코드들에 대해 모든 중복을 제거하며 리팩토링한다.

[TDD] 단위 테스트와 TDD(테스트 주도 개발) 프로그래밍 방법 소개 - (1/5)

위 블로그에 상세히 기재되어 있어서 살펴보았는데,

TDD를 쓴 것처럼 흉내내는 것이 아닌 제대로 사용할 수 있을지...🥲     

일단 화이팅...💪