TTD란 무엇인가?
테스트 코드를 먼저 작성하고 그 테스트를 통과하기 위한 코드를 짜는 일종의 개발 방법론이다.
기본적으로 create-react-app을 하여 react 프로젝트를 만들게되면
tdd를 위한 기본 설정이 다 되어있다.
테스트를 위해 react-testing-library와 jest가 필요하다.
- react-testing-library는 테스트를 위한 가상돔을 제공해주는 역할이다.
- jest는 테스트를 진행해주는 역할을 하여 해당 테스트가 pass인지 fail인지 판별해준다.
간략하게 코드 살펴보기
기본적으로 cra하게되면 App.test.js 파일이 있을것이다. test를 진행하기 위해선 컴포넌트명.test.js 형태로 파일이 만들어져야한다.
App.test.js 파일 내부를 살펴보면 아래와 같다.
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});위 코드에서 render 메서드는 가상돔을 생성해주는 역할을 한다.
즉 App컴포넌트를 가져와주는 역할을 한다. 그리고 screen 글로벌 객체가 가상돔에 접근할수 있게 해준다.
때문에 screen. 을 통해 해당 App컴포넌트에 접근을 하여 getByText()를 이용해 App 컴포넌트 안에 있는 element을 불러오는 것이다.
즉, screen.getByText(/learn react/i) 의 뜻은 App 컴포넌트 안에있고, 그 안에서 learn react 라는 텍스트를 가진 element를 linkElement라는 변수에 할당하는 것이다.
/learn react/i 은 정규표현식으로 대소문자 구분하지 않는 것입니다.
마지막으로
expect(linkElement).toBeInTheDocument();
은 해당 element가 우리의 document에 들어있는지 확인하는 것입니다.
.toBeInTheDocument() 와 같은 것을 jest or jest-dom matcher라고 부릅니다.
종합적으로 요약하자면 App컴포넌트안에 Learn React라는 텍스트를 가진 요소를 가져와 그 요소가 html document에 있는지 테스트 하는 것입니다.
해당 document에 그 요소가 있다면 pass를 하고 없다면 fail을 하는 것입니다.
이처럼 TDD는 원하는 컴포넌트에 대한 입출력과 예상 결과값을 미리 작성한다음 그 컴포넌트의 기능 구현을 하는 것입니다. 그러면 저장을 누를때마다 해당 테스트가 pass인지 fail인지 바로 알수있게되며 버그를 줄이면서 안전한 개발을 할 수 있게 됩니다. -> jest가 파일의 변화를 계속 watch 하고 있습니다! 변화가 없으면 test를 진행하지 않습니다.
추가적으로,
jest-dom 이란 것이 있는데, DOM 요소에 대한 테스트를 더 쉽게 하기 위해 사용자 정의 matcher를 사용하여 jest를 확장하는 라이브러리입니다
- create-react-app 할때 같이 세팅되어있습니다.
- test가 실행되기전 src/setupTest.js에 import를 하며, 이용가능한 matcher를 만들어줍니다.
테스트 방법에는 unit test, integration test, functional test가 있다.
Unit Test란?
- 함수 하나 하나 개별로 테스트 하는 것이다. (함수와 같이 세밀한 단위로 테스트)
- fail로 발생하는 버그를 잡아내기가 매우 용이하다.
Integration Test란?
- 각각의 시스템들이 정상적으로 상호작옹 하는지 테스트 하는것
- 유닛테스트는 컴포넌트별로 독립적으로 테스트하는 반면 통합테스트는 외부리소스와 직접적으로 통신하면서 테스트
- 보통 유닛테스트만으로 충분하지 못하다고 느끼지 못할때 사용
Functional Test란?
- 어플리케이션이 정상 작동하는지 완전한 기능 테스트할때 사용
- 유저가 소프트웨어와 어떤식으로 interact 하는지 파악하는데 좋다.
아래의 링크는 testing-library에서 우선순위로 외우면 좋은것들을 나열한 list이다.
https://testing-library.com/docs/queries/about/#priority
- 위 링크에 접속하면 getByRole이 가장 처음에 나오는 것을 볼 수 있다.
- 기본 CRA test코드는 getByText를 이용하여 dom에 접근하지만, 상호작용하는 요소를 가져올때는 getByRole를 사용하는것이 권장된다!
- getByRole은 WA-ARIA role(접근성을 위해 나눠노은 role)를 따르는 요소를 가져온다.
