1-3. React Testing Library API

1. 어떤식으로 시작할까?

• create-react-app으로 react 프로젝트를 만들면, 기본적으로 test하는 라이브러리도 같이 설치가 된다.

2. src/App.test.js 을 살펴보자

• screen이라는 객체에는 여러가지 쿼리들이 있다.
• getByText()는 App 컴포넌트에 다음 텍스트가 있는지 확인 하는 것이다.
• toBeInTheDocument() matcher이고, 다음 element가 존재하는 확인하는 matcher이다.

• test('renders learn react link', () => {
    const { getByText } = render(<App />);
    const linkElement = getByText(/learn react/i);
    console.log(linkElement);
    expect(linkElement).toBeInTheDocument();
  });
  1 다음 같이 사용할 수도 있지만, screen객체를 사용하는 것이 좋다.
  2 getByText뿐만 아니라 다른 많은 쿼리도 사용하게 되면 복잡해지기 때문이다.

3. 쿼리함수

• 쿼리함수란?
  • 쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방식이다.
  • 쿼리의 종류는 'get, find, query'가 있다.
    • get은 일치하지 않으면 오류를 발생 시킨다.
    • find는 일치하는 요소가 발견되면 Promise를 반환한다.
      (geyBy + waitFor)
    • query는 일치하지 않으면 null 반환 한다.
• 정리된 표