[react-testing-library] react-testing-library란?

🎯 react-testing-library

• 테스트가 소프트웨어가 사용되는 모습을 닮을수록, 테스트를 더욱 신뢰할 수 있게 된다.
  • The more your tests resemble the way your software is used, the more confidence they can give you.
  • 사용되는 모습이란? 사용자가 직접 앱을 사용하는 모습이다.
• React 컴포넌트의 특정 메서드나 상태를 테스트하는 게 아니라, 실제 유저가 사용하는 방식대로 테스트하는 접근하는 것이다.
• 유저가 페이지에서 어떤 DOM 요소에 접근하는 방법을 흉내 낸다.
• 이 방식으로 테스트 코드를 작성하면, 내부 구현이 바뀌어도 테스트가 깨지지 않는다.
• React 컴포넌트가 렌더링 한 결과에 대한 접근만 가능하다.
  • 결과 중심의 테스트
• 쿼리는 내부 상태나 내부 메서드에 접근할 수 없게 설계됨.

 

📝 get

• getBy 관련 쿼리는 원하는 요소를 찾지 못할 경우나 여러 개의 요소를 찾을 경우 에러를 던진다.
• getAllBy 관련 쿼리는 여러 요소를 찾아 배열을 반환한다. 원하는 요소를 찾지 못할 경우 에러를 던진다.
• 원소가 반드시 페이지에 존재해야만 하는 경우 활용할 수 있다.

 

📝 find

• findBy 관련 쿼리는 원하는 원소가 없더라도 비동기적으로 기다리게 된다.
• 여러 원소를 찾거나, 정해진 timeout동안 찾지 못하면 에러를 던진다.
• findAllBy 관련 쿼리는 여러 원소를 검색해 배열을 반환한다. 정해진 timeout동안 찾지 못하면 에러를 던진다.
• Promise를 리턴하며 실패 시 reject, 성공 시 resolve.
• 어떤 유저의 동작 후에 등장하는 원소 등을 테스트하고자 할 때 활용한다.

describe("비동기 컴포넌트", () => {
  test("renders posts if request succeeds", async () => {
    render(<Async />);

    const listItemElements = await screen.findAllByRole("listitem");
    // 한 개 이상의 item을 가져오니까 findAllByRole 사용
    // find는 원하는 원소가 없더라도 비동기적으로 기다리게 된다.
    
    expect(listItemElements).not.toHaveLength(0); 
    //성공하면 빈 배열을 가져오지 않으니까 not.toHaveLength(0)를 통해서 빈 배열이 아닌지 test
  });
});

const listItemElements = screen.findAllByRole("listitem", {}, {});
// 두 번째 인자는 exact를 설정, 세 번째 인자는 timeout 기간을 설정(디폴트는 1초)

 

📝 query

• queryBy 관련 쿼리는 getBy와 비슷하게 원소를 찾아 반환하나, 못 찾을 경우 에러를 던지지 않고 null을 반환한다. 여러 원소를 찾으면 에러를 던진다.
• queryAllBy 관련 쿼리는 getAllBy와 비슷하게 여러 개의 원소를 찾아 배열로 반환하나, 하나도 찾지 못하면 에러 대신 빈 배열을 반환한다.
• 특정 요소를 찾을 수 없음을 assertion의 기준으로 둘 때 활용된다.

 

📝 container

• container는 컴포넌트를 렌더 한 결과를 감싸는 원소
• queryselector(), querySelectorAll()을 이용해 selector 문법으로 원소를 선택할 수 있다.

 

📝 jest-dom

• react-testing-library는 jest를 확장하여, 좀 더 쓰기 편한 assertion을 제공한다.
• toBeInTheDocument(), toHaveValue(), toBeDisabled(), toBeVisible() 등 DOM 테스팅에 특히 유용한 assertion 메서드를 제공한다.