TIL - 20220624

코드숨

오늘도 코드숨 과제를 진행했다. 다른 모든 컴포넌트를 포함하고, 상태를 갖는 App 컴포넌트에 대한 테스트를 작성했는데 기능이 많다 보니 BDD(describe - context - it) 패턴으로 테스트를 작성하는 게 쉽지 않았다.

- Input을 렌더링한다.
- Input의 값이 바뀌면 새로 바뀐 Input의 값을 렌더링한다.
- Input에 값이 있다면
    - 추가 버튼을 클릭하면, Input을 비운다.
    - 추가 버튼을 클릭하면, 할 일을 렌더링한다.
- 할 일들이 있다면
    - 할 일들을 렌더링한다.
    - 완료 버튼을 누르면, 해당 할 일을 삭제한다.

그래서 이와 같이 App 컴포넌트가 하는 일에 대한 명세를 먼저 작성하고, 테스트를 작성했다. 이후 트레이너님의 피드백에 따르면 App 컴포넌트 내부에 상태를 포함한 로직이 구현돼 있기 때문에 E2E 테스트와 비슷하게 작성하면 된다고 한다. 어느 정도 테스트에 대한 감이 생기고 있는 것 같다 😂

React Testing Library

render vs screen

React Testing Library에서는 어떤 요소를 쿼리 하는 방법으로 render의 리턴 값을 이용하는 방법과 screen이라는 별도의 객체를 이용하는 방법이 있는데 코드숨 과제를 진행하다가 그 차이가 궁금해서 검색해봤다.

 

React Testing Library의 개발자인 Kent C. Dodds에 따르면, screen은 DOM Testing Library 6.11.0 버전에서 추가되었으며 (즉 @testing-library/react@>=9), 필요한 쿼리를 추가/제거할 때 render를 호출해 최신 상태로 구조 분해할 필요가 없기 때문에 screen 사용을 권장한다.

 

정리해보자면, 과거에는 쿼리 하는 방법이 render의 리턴 값을 이용하는 방법밖에 없었지만, 이후에 편의를 위해서 screen이 새로 추가됐으며, React Testing Library의 개발자는 screen 사용을 권장한다. 하지만 개인의 선호에 따라 선택해서 사용하면 될 것 같다.

 

https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen

Common mistakes with React Testing Library

Queries Prioriy

마지막으로 React Testing Library의 다양한 쿼리 중에 어떤 것을 써야 할지 고민이었는데 다음과 같이 공식적으로 권장하는 우선순위가 있으니 이를 참고하면 좋을 것 같다.

 

https://testing-library.com/docs/queries/about/#priority

About Queries | Testing Library