queryByText와 getByText

queryByText와 getByText

@testing-library/react의 queryByText와 getByText는 중요한 차이점을 갖고 있다. 바로 오류를 발생시키는 조건이다.

queryByText

queryByText는 요소를 찾을 수 없을 경우 null을 반환한다. 따라서 특정요소가 화면에 없어야 함을 확인하고자 할 때 유용하다. 예를 들어 특정 텍스트가 화면에 나타나지 않아야 할 때, queryByText를 사용하여 해당 요소가 null인지 확인할 수 있다.

test("popover responds to hover", async () => {
  const user = userEvent.setup();
  render(<Component />);

  // 처음에 popover가 안보이는가?
  const nullPopover = screen.queryByText(
    /no ice cream will actually be delivered/i
  );
  expect(nullPopover).not.toBeInTheDocument();
 })

getByText

getByText는 요소를 찾을 수 없을 때 오류를 발생시킨다. 즉 테스트가 실패하는 경우에 사용하면 좋다.

예를 들어 텍스트가 화면에 표시되어야 하는데, 해당 텍스트가 화면에 표시되지 않는 경우 getByText는 테스트가 실패하도록 오류를 발생시킨다.

test("popover responds to hover", async () => {
  // 호버시 popover 가 나타난다. 만약 나타나지 않으면 에러를 띄운다.
  const termsAndConditions = screen.getByText(/terms and conditions/i);
  await user.hover(termsAndConditions);
  const popover = screen.getByText(/no ice cream will actually be delivered/i);
  expect(popover).toBeInTheDocument();
});