예전부터 계속 배우고 싶었던 TDD(Test Driven Development, 테스트 주도 개발)에 대해서 알아보고, 어떤 흐름으로 테스트 코드를 작성하는지 알아보죠.
velopert님의 TDD 포스팅을 참고했습니다.
TDD란 무엇인가?
테스트 코드를 먼저 작성하고 나서 이를 통과시키기 위해 코드를 작성하는 형태의 개발론입니다. 다음의 그림을 확인해보죠.
- 테스트 코드를 작성하고 돌리면 당연히 실패가 뜨겠죠?
- 테스트 코드를 성공시키기 위해서 코드를 작성합니다.
- 성공하면 코드를 리팩토링해서 더 효율적으로 작성합니다.
TDD를 위한 라이브러리
velopert님의 포스팅을 통해서 배운 테스팅 라이브러리는 총 두 가지입니다. @testing-library/react 그리고 enzyme입니다. velopert님이 글을 작성했을 당시에 사용률은 enzyme이 압도적으로 많았지만 현재 npm trends를 다시 확인해보니 @testing-library/react가 이를 넘어섰습니다.
두 가지 라이브러리 모두 다 알아두면 좋을 것 같아서 이번 기회를 통해 알아보겠습니다.
jest? enzyme? @testing-library/react?
jest는 테스팅 프레임워크입니다. 테스팅의 기본 형식은 jest를 따라가죠.
describe("<TodoForm />", () => {
const set = (props = {}) => {
const utils = render(<TodoForm {...props} />);
const {getByText, getByPlaceholderText} = utils;
const input = getByPlaceholderText("할 일을 입력하세요.");
const button = getByText("등록");
return {...utils, input, button};
};
it("has input and a button", () => {
const {input, button} = set();
expect(input).toBeTruthy();
expect(button).toBeTruthy();
});
}위의 코드와 같이 describe it expect 키워드를 사용해서 테스트 코드를 짰는데 이는 jest의 테스트 형식입니다.
이와는 다르게 Enzyme과 @testing-library/react는 테스팅 라이브러리입니다. 테스트 코드를 작성할 때 좀 더 많은 기능을 사용할 수 있게 추가된 패키지들이죠.
그럼 Enzyme과 @testing-library/react의 차이점을 알아보죠.
Enzyme은 컴포넌트의 내부 기능에 자주 접근합니다. 예를 들어 컴포넌트가 가지고 있는 props, state를 조회하고 컴포넌트의 메서드들을 직접 호출하기도 하죠.
이와는 다르게 @testing-library/react는 렌더링된 결과에 좀 더 집중합니다. 실제 DOM에 더 집중하며, 화면에 무엇이 보여지고 있는지, 이벤트가 발생했을때 DOM이 어떻게 변화하는지에 초점을 맞춘 테스팅 라이브러리입니다. Enzyme보다 사용자 관점에서 테스팅하기 좋겠죠. 그리고 앞에서 보여드린 trends 그래프에서 @testing-library/react가 Enzyme을 뛰어넘었습니다.
리액트 공식 문서를 보면 @testing-library를 권장하고 있습니다. 저는 유닛테스트에 앞으로 @testing-library/react를 활용해 테스트 코드를 짤 것 같네요. (물론 둘 다 할 줄 알면 좋겠죠?)
이후에 직접 코드를 짜면서 TDD를 적용한 사례를 포스팅해보도록 하겠습니다.
