React Testing - Debug, Interactions

Debugging

screen.debug()

• DOM 트리를 출력해준다, 디버깅 하는데 유용하다.
  

logRoles

const view = rener(...);
logRoles(view.container);
- Role 별 Element를 정리해서 보여준다.

Testing Playground

• Chrome Extension 으로 테스트를 돕는다.
• 자동으로 최고의 Query를 알려준다.

---

yarn upgrade 로 패키지 업그레이드 가능

User Interaction

13.5 버전은 여기 참조

https://testing-library.com/docs/user-event/v13

• 주로 user-event 라이브러리를 사용한다.
• 사용자 상호작용을 시뮬레이션 한다, RTL에서 권장되는 방법이다.

fireEvent vs user-event

• fireEvent
  • DOM event를 처리한다
  • Ex. input onChange 이벤트를 처리한다.
• user-event
  • 상호작용을 완전히 시뮬레이션 해, 여러 Event를 처리 및 확인한다.
  • Ex. input의 focused, keyboardEvent, onChange 등을 전부 처리한다.
  • render 이전에 user.setup() 메소드를 호출해야 한다.

Mouse Interaction

import userEvent from '@testing-library/user-event'
// import

// render 이전에 user 가져온다.
const user = userEvent.setup()

const incrementButton = screen.getByRole("button", { name: "Increment" });
// 버튼을 가져온다.

await user.click(incrementButton)
// 주어진 버튼을 유저가 클릭한다 >> 비동기 함수!

가능한것들

• 좌클릭
  
• 좌클릭 후 우클릭
  
• keys 없이 문자열로도 가능
  
• 왼쪽버튼 누르고 놓지 않음
  
• 왼쪽버튼을 놓는다.

Keyboard Interaction

• user.type(입력할 대상, 입력 값)
  • 대상에 값을 입력한다.

const input = screen.getByRole('spinbutton')
user.type(input, '10')

• user.tab()
  • 탭키를 누르는것을 가정한다.
• user.clear(입력할 대상)
  • 값을 지운다.
• user.selectOptions(입력할 대상, [선택 대상들])
  • 여러개를 선택 가능한 dropdown 메뉴에서 선택한다.
    
• user.deselectOptions
  • selectOptions 의 반대.
• upload()
  • 파일 업로드를 시뮬레이션 한다.
    

클립보드

• user.copy()
• user.cut()
• user.paste()

키보드 API

• user.keyboard('foo')
  • f, o, o 를 키보드로 누른다.
• user.keyboard('{Shift>}A{/Shift}')
  • 쉬프트를 누른채로 A를 누르고 쉬프트를 뗀다.
  • 특수키는 위와 같이 중괄호를 사용한다.