React Testing Tutorial(3) - Assertion, Matchers

Assertions

테스트에서 코드의 특정 조건이나 표현이 예상대로 작동하는지를 확인하는 구문을 의미한다.
테스트 중인 코드가 기대한 결과를 반환하는지, 특정 상태에 있는지를 확인하기 위해서 사용된다.

즉, Assertion은 코드의 동작이 기대와 일치하는지 확인해 주고, 예상과 일치하지 않을 경우 테스트를 실패로 표시한다.

테스트를 통과/실패로 만들어 예상과 실제 결과 간의 불일치를 조기에 발견할 수 있게 도와준다.

사용 예시

expect(value).toBe(expectedValue)

위의 구문이 Assertion으로 value가 expectedValue와 동일한지 검사한다.

 

 

Matchers

테스트 대상 코드의 결과를 예상한 값과 비교하는 데 사용되는 함수이다. expect와 함께 사용되고, 올바로 작동하는지 확인하는 Assertion을 만든다.

단순한 값을 비교하는 것뿐만 아니라, 요소 존재 여부, 텍스트 내용, 스타일 등 다양한 조건을 확인할 수 있다.

예를 들어 toBeNull, toBeTruthy, toContain 등이 있다.

jest에서 사용할 수 있는 matcher

https://jestjs.io/docs/using-matchers

 

 

DOM 테스트

DOM을 테스트하기 위해서 Jest DOM을 추가적으로 설치하여 테스트할 수 있다.
jest DOM을 이용하면 프런트엔드 프레임워크에서 컴포넌트를 테스트할 수 있다.

jest DOM을 이용하면 일반적인 Jest Matcher보다 DOM 요소에 특화된 매처를 제공하므로 훨씬 의미 있는 테스트를 진행할 수 있다.

기본적으로 jest에 포함되지 않은 toBeInTheDocument, toHaveTextContent, toBeVisible 등의 Matcher가 있다.

jestDOM에서 사용할 수 있는 Matcher

https://github.com/testing-library/jest-dom

jest-dom의 깃허브에서 사용할 수 있는 matcher와 언제 사용하면 좋을지에 대한 내용, 예시를 포함하고 있으니 확인해 보면 좋을 것 같다.

 

 

무엇에 대해서 테스트를 진행할 것인가?

늘 테스트 코드를 작성하고 싶다고 생각하고, 테스트 코드가 좋다는 것은 알고 있었다. 하지만 무엇을 테스트해야 하며, 어떤 것을 테스트할지 고민을 하다가 결국 못하는 상황의 반복이었다.

어떤 것을 테스트해야 할까?

테스트 코드에 대해서 명확하게 설정되어 있는 규칙은 없다. 하지만 리엑트에서 테스트할 가치가 있는 것에 대한 가이드라인은 있다.

• 컴포넌트가 오류 없이 잘 렌더링 되는가?
• props와 함께 컴포넌트가 잘 렌더링 되는가?
• 다른 상태에서 컴포넌트가 잘 렌더링 되는가?
  • 예를 들어, nav bar가 로그인 상태에서는 보이지만 로그아웃 된 상태에서는 안 보여야 하는 경우
• 컴포넌트가 이벤트에 올바르게 작동하는가?
  • 예를 들어, 버튼이나, form 컨트롤 같은 컴포넌트에 적용할 수 있다.

 

어떤 것을 테스트하지 말아야 할까?

반대로 테스트를 하지 않는 것이 좋은 경우가 있다.

• 구현 세부정보
• 서드파티 코드 ( 내가 작성하지 않은 코드 )
  • 다른 사람이 만든 라이브러리 같은 경우 테스트를 진행하지 않아도 된다.
• 사용자 관점에서 중요하지 않는 코드

이렇게 총 7가지의 가이드라인은 기초적인 것이며, 이것을 바탕으로 테스트 코드를 작성하면서 서비스를 구현하면 좋을 것 같다.