React Testing Library 배우기

no-pla·2024년 3월 12일

React Testing Library

목록 보기

1/4

리액트 테스팅 라이브러리는 TDD(Test-Driven Development)에서 사용되는 라이브러리로,

Test-Driven Development(테스트 주도 개발)은 코드를 작성하기 이전에 테스트를 작성하고 그 테스트에 통과하도록 코드를 작성하는 방식을 말한다.

리액트 라이브러리에는 Jest와 Vitest라는 테스팅 라이브러리가 있다.
이 두 가지 라이브러리의 문법은 차이가 없고, 설정과 구성 구문만이 다르다.

테스트 코드 작성법은 두 라이브러리 모두 동일한 문법을 사용한다. test 메서드는 두 개의 인자를 받아온다.
테스트를 설명하는 문자열 인수 하나와, 테스트가 통과할 지 실패할 지를 결정할 때 실행할 함수를 받아온다.

테스트가 실패하면 에러를 반환한다.

test('테스트', () => {
	render(<App />)
	const headingElement = screen.getByText(/learn react/i);
	expect(headingElement).toBeInTheDocument();
})

render 메서드에서는 시뮬레이션 된 DOM을 만든다. 이렇게 가져온 DOM은 screen 메서드를 통해 접근할 수 있다.
마지막 줄의 expect에서 테스트를 단언(assertion)한다. 이 부분에서 테스트의 성공 혹은 실패 여부가 결정된다.

expect(linkElement).toBeInTheDocument();
expect(element.textContent).toBe('hello');
expect(elementsArray).toHaveLength(7)

단언은 위의 구조로 작성된다. expect로 시작되고 expect는 단언의 대상을 인자로 받는다. 다음으로 단언의 유형을 결정하는 matcher함수를 가져온다. 이 함수는 인자를 받을 수도 있고, 받지 않을 수도 있다.

유닛 테스트는, 코드의 한 단위를 테스트하는 것을 말한다. 특정 유닛이 다른 유닛과 상호작용하는 것을 테스트하지 않는다.

테스트를 최대한 격리시킨다. 따라서 테스트가 실패했을 시 어디서 실패했는지 정확하게 알 수 있다. 그러나 사용자가 소프트웨어를 사용하는 방식과 다르기 때문에 테스트에 통과해도 상호작용에 문제가 생길 수 있고, 그 반대의 경우도 발생할 수 있다.
리팩토링으로 작성 방법 변경으로 인하여 실패가 발생할 수 있다.

통합 테스트는 유닛 간의, 컴포넌트와 컴포넌트 등의, 상호 작용을 테스트 한다.

기능 테스트는 소프트웨어의 특정 기능을 테스트한다. 폼을 작성할 때, 잘못된 데이터를 입력할 때 경고 문구가 뜨는지 등의 테스트가 이에 속할 수 있다. 코드가 아닌 동작을 테스트 한다.

기능 테스트는 특정 동작이나 유저 플로우와 관련된 모든 동작을 포함하기 때문에, 사용자가 상호작용하는 방식과 밀접하다는 장점이 있다. 따라서 테스트의 성공 여부에 따라 실제 사용자의 성공 여부가 달라질 수 있다.
유닛 테스트와는 달리, 리팩토링으로 코드의 작성 방법이 변경되더라도 같은 동작을 한다면 테스트의 결과도 동일하게 나온다.
그러나 테스트가 실패할 경우, 어느 코드가 실패한 것인지 정확하게 알기 어렵다는 단점이 있다.