[테스트 코드] React Testing Library

01. React Testing Library 주요 API

• render 함수

  • render함수를 가져오는 방법은 두가지

    • render 후, screen객체로 가져오기
    • 쿼리함수로 가져오기
    • 소스코드가 복잡해지면 하나씩 쿼리함수를 쓰기 애매하기 때문에 screen 추천

// screen객체로 가져오는 방법
test('learn react', () => {
	render(<App/>)
    const linkElement = screen.getByText(/learn react/i)
    expect(linkElement).toBeInTheDocument()
}
// 쿼리함수로 하나씩 가져오는 방법
test('learn react', () => {
	const {getByText} = render(<App/>)
    const linkElement = getByText(/learn react/i)
    expect(linkElement).toBeInTheDocument()
}

02. 쿼리 함수

• 페이지에 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법
• 여러 유형의 쿼리 : get, find, query

03. get, find, query

• getBy
  • 일치하는 노드를 반환하고, 일치하는 요소가 없거나 둘 이상의 일치가 발견되면, 설명 오류를 발생시킴
  • 둘 이상이면 : getAllBy
• queryBy
  • 일치하는 노드를 반환하고, 일치하는 요소가 없으면 Null 반환
  • 존재하지 않는 요소를 어센셜하는데 유용
  • 둘 이상의 일치 항목이 발견되면 오류 발생
  • 둘 이상이면 : queryAllBy
• findBy
  • 쿼리와 일치하는 요소가 발견되면, Promise를 반환
  • 요소가 발견되지 않거나 기본 제한시간인 1000ms 후에 둘 이상의 요소가 발견되면, 약속이 거부
  • 둘 이상의 요소를 찾아야 하는 경우: findAllBy
  • waitFor
    • 일정 기간 동안 기다려야 할 때, waitFor를 사용하여, 기다려야하는 것이 통과할 때까지 기다릴 수 있음