[React] 🦮월월월월의 React Testing Library

React Testing Library

테스트의 종류

Unit Test

함수나 컴포넌트, 코드의 한 유닛 혹은 단위를 테스트한다.

유닛 테스트는 테스트를 최대한 격리시킨다.

유닛이 다른 코드의 유닛과 상호 작용하는 것은 테스트하지 않는다.

컴포넌트가 의존하는 다른 함수가 있으면 실제 버전이 아닌 테스트용 버전을 사용한다.

Integration Test

컴포넌트 간, 유닛간의 상호작용을 테스트 한다.

Functional Test

소프트웨어의 특정 기능을 테스트한다.

특정 코드의 함수가 아닌 소프트웨어의 일반적인 동작을 의미한다.

React Testing Library는 Functional Test를 권장한다.

E2E Test

실제 브라우저와 서버를 사용하여 사용자 관점에서 테스트 한다.

React Testing Library

React Testing Library는 사용자가 소프트웨어를 사용하는 것처럼 테스트 할 수 있게 해준다. 이때 내부 구현은 신경을 쓰지 않아 내부 로직이 바뀌어도 사용자가 결과적으로 똑같이 사용을 할 수 있으면 테스트의 결과는 바뀌지 않는다. React Testing Library는 ID가 아닌 area-label같은 accessibility marker를 통해 요소를 찾는다.

React Testing Library가 하는일은 다음과 같다.

• 요소들을 렌더링하고 테스트할 가상 DOM 제공
• DOM을 변경하고 검사할 수 있는, 즉 가상 DOM과 상호작용할 수 있는 방법을 제공

Jest/Vitest

Jest와 Vitest는 테스트를 실행한다.

Jest와 Vitest가 하는 일은 다음과 같다.

• 테스트를 찾는다
• 테스트를 실행한다.
• 테스트가 통과 혹은 실패인지 구분한다.

Jest와 Vitest의 차이는 파일을 지정하는 설정과 구성구문이다. 따라서 작성하는 테스트 코드는 Jest와 Vitest에서 모두 작동한다.

Test

테스트를 정의한다.

test는 전역 메서드이며 2가지 인자를 받는다.

• 테스트의 설명
• 테스트 함수

test('테스트 설명', ()=>{
  // 테스트 함수
})

테스트 함수에서 에러가 발생하면 테스트는 실패한다.

테스트 함수 내에 Aessertion(단언)이 예상값과 결과가 다르면 에러를 발생시킨다.

에러가 없으면 테스트는 성공한 것이다.

Assertion (단언)

테스트가 통과되었는지 아닌지 정한다.

expect(단언대상).matcher(인자)

• expect 전역 메서드이며, 단언을 시작한다. 단언의 대상을 인자로 받는다.
• matcher 단언의 유형을 나타낸다. matcher에 따라 인자를 받을수도 있다. tobe, tobeInDocument등 여러가지 메서드가 있다.