React에서 테스트 해보기

학습 목표

• What is “Testing”? And Why?
• Understanding Unit Tests
• Testing React Components & Building Blocks

Testing React Apps: Automated Testing

What is “Testing”? And Why?

물론 수동 테스팅을 할 수도 있다. 그렇지만 이는 모든 시나리오를 전부 파악하기 어렵기 때문에 버그가 생겨 오류가 발생할 가능성이 크다. 그렇기에 자동화된 테스팅은 전체 코드를 테스트를 하기 때문에 수동 테스팅보다 버그가 생길 가능성이 적다.

Understanding Unit Tests

테스트에는 3가지 유형이 있다.

• Unit Tests: 가장 작은 단위에서 테스트
• Integration Tests: 여러 구성 요소를 통합해서 테스트
• End-to-End (e2e) Tests: 전체 과정을 테스트

서로 다른 building blocks에서 발생할 수 있는 성공 및 오류 사례를 테스트하면 된다.

테스트를 실행하고 결과를 assert 할 수 있는 도구가 필요한데 가장 인기 있는 라이브러리는 jest이다. 그리고 렌더링을 위한 도구가 필요한데 가장 인기 있는 라이브러리는 React Testing Library이다. 둘 다 CRA에 포함되어 있다.

Testing React Components & Building Blocks

1. 파일명을 .test.js로 작성하면 되고 실행할 때는 npm test를 사용하면 된다.
2. test()를 먼저 적고 첫 번째 매개변수로는 식별자를 두 번째에는 함수를 넘겨준다.
   • 세 가지 과정을 거친다.
     • Arrange: 컴포넌트를 렌더링 해서 설정하는 것
       • import { render } from "@testing-library/react";
       • render() 사용하면 됨.
     • Act: 실제로 작동하는 부분
       • import userEvent from "@testing-library/user-event";
       • userEvent의 메서드를 사용해 주면 됨.
       • 참고로 CRA에 있는 user-event 버전은 13.5.0임.
     • Assert: 아웃풋 검토
       • import { screen } from "@testing-library/react";
       • screen queries를 사용하면 됨. screen.getBy...
         • get을 사용하다가 null을 반환하고 싶으면 query, 프로미스를 반환하고 싶다면 find를 사용하면 됨.
         • {exact : false}를 query 메서드 매개변수에 넘겨주면 글자가 포함만 되면 테스트가 성공하게 만듦.
       • expect()로 element 넘겨주고 matcher 함수를 사용하면 됨. expect(element).toBe...

만약 그룹화를 하고 싶다면 describe()를 사용하면 된다. 다른 컴포넌트로 감싸도 테스트에 따로 지정해 줄 필요 없이 똑같이 작동한다. 이를 통합 컴포넌트 테스트라고 한다.

만약 비동기 컴포넌트를 테스트하고 싶다면 두 번째 인자의 함수에 async를 붙여주고 screen에서 element를 가져올 때 await를 붙여줘야 한다. 비동기는 즉시 실행하지 않기에 완료될 때까지 기다려줘야 한다.

근데 여기서 주의해야 할 점이 있다. 만약 HTTP 요청의 경우 서버에 진짜로 요청이 되기 때문에 POST 요청의 경우 테스트 코드가 저장이 되는 문제가 생긴다. 이를 해결하기 위해서 데이터를 진짜로 보내지 않게 하거나 테스트용 서버에 보내는 방법이 있다.

데이터를 진짜로 안 보내게 하려면 일단 fetch 함수 부분은 잘 된다고 판단하고 나머지 부분만 테스트하면 된다. 그러기 위해서는 mock 함수를 사용하면 된다. mock 함수는 jest에서 지원하며 jest.fn()으로 mock 함수를 생성하고 알맞은 메서드를 사용하면 된다.

• act가 있는 테스트 코드 확인하기
• mock 함수 이용한 비동기 테스트 코드 확인하기

그 외에도 커스텀 훅을 테스트하고 싶다면 React Hooks Testing Library를 사용하면 된다.

참고할 사이트들

• About Queries - Testing Library
• user-event v13 - Testing Library
• Expect의 Custom matchers - Jest Dom
• describe() - Jest
• HTML 태그의 role - w3
• Mock Functions - Jest

공식문서

• React Testing Library 공식 문서
• Jest 공식 문서
• React Hooks Testing Library 공식 문서

---

강의명

• Udemy : React 완벽 가이드