단위 테스트

단위 테스트?

앱에서 테스트 가능한 가장 작은 소프트웨어를 실행해 예상대로 동작하는지 확인하는 테스트

텍스트 필드 테스트 예시

텍스트 필드 컴포넌트를 제작하여 단위 테스트를 진행한다.

먼저 해당 컴포넌트를 파악한다.

• placeholder 설정
• className에 따른 css class 설정
• 텍스트를 입력할 때마다 onChange 핸들러 호출
• focus 시 border 스타일 변경
• focus 시 onFocus 핸들러 호출
• Enter 키 입력 시 onEnter 핸들러 호출

이제 단위 테스트를 통해서 해당 기능들이 제대로 동작하는지 확인해야한다.

※ Arrange-Act-Assert 테스트 작성 패턴

• Arrange : 테스트를 위한 환경 만들기
• Act: 테스트할 동작 발생
• Assert: 올바른 동작이 실행 되었는지 또한 변경사항 검증

css class 적용 테스트

it('className prop으로 설정한 css class가 적용된다', async () => {
  // Arrange - 테스트를 위한 환경 만들기
  // -> className을 지닌 컴포넌트 렌더링
  // Act - 테스트할 동작 발생
  // -> 렌더링에 대한 검증이기 때문에 해당 단계 생략
  // Assert - 올바른 동작이 실행되었는지 검증
  // -> 렌더링 후 DOM에 해당 class가 존재하는지 검증
});

• Arrange 단계

Testing Library 에서는 render 기능을 제공하므로 해당 기능을 사용하여 적용 테스트를 진행할 수 있음

  await render(<TextField className="my-class" />);

render API 호출 -> 테스트 환경의 jsDOM에 리액트 컴포넌트가 렌더링된 DOM 구조가 반영
jsDOM: Node.js에서 사용하기 위해 많은 웹 표준을 순수 자바스크립트로 구현

• Assert 단계

해당 단계에서는 렌더링된 텍스트 필드 요소를 조회해야하는데, 테스트 대상이 되는 요소에 접근하기 위해서 testing Library에서 제공하는 쿼리를 사용하게 된다.

React Testing Library 쿼리

종류	설명
ByRole	role 값을 지니고 있는 요소 선택
ByLabelText	input의 label내용으로 input 요소를 선택
ByPlaceholderText	placeholder값으로 input 또는 textarea 선택
ByText	요소가 가지고 있는 텍스트 값으로 선택
ByDisplayValue	input,textarea,select가 지니고 있는 현재 값으로 요소 선택
ByAltText	img처럼 alt속성을 가지고 있는 요소 선택
ByTitle	svg처럼 title 속성을 가지고 있는 요소를 선택
ByTestId	data-testid가 명시된 요소를 선택

vitest의 expect 함수를 사용해서 기대 결과를 검증할 수 있다.

  expect(screen.getByPlaceholderText('텍스트를 입력해주세요')).toHaveClass(
    'my-class',
  );

className이라는 내부 prop이나 state값을 검증하려고 하는것 보다 렌더링되는 DOM 구조가 올바르게 변경되었는지 확인한다는 느낌을 접근하는 것이 좋다. 전자 방식으로 접근하게 되면 내부 구현에 대한 종속성을 피할수 없게 된다.