react-testing-library (4) 썸네일형 리스트형 리액트 테스트 : Context API 테스트와 커스텀 렌더 함수 사용하기 TLDR : UI 사용자가 관심 없는 건 구현 상세입니다. 컨텍스트를 사용하는 컴포넌트를 테스트하려면 wrapper가 필요합니다. (ThemeProvider, Router, Authentication) 우리가 UI를 테스트 하는 이유는, bad ux(사용자 관점 버그)를 막기 위함입니다. 따라서 테스트 코드는 UI적인 관점만 드러나면 좋습니다. 코드가 아닌 사용자의 행동으로 UI가 변해야 하는 경우 act 함수를 통해 명시한 것도 비슷한 맥락입니다. 따라서, render 관련한 함수도, 유틸로 분리합니다. 테마를 테스트 하는 코드 얼핏 보면 렌더가 뭔가 이상합니다. 이는 컨텍스트를 테스트의 관심사에서 제외해 버렸기 때문입니다. 대신 테스트 자체에 좀 더 집중할 수 있습니다. (테마의 변경) https:.. 리액트 테스트 : 폼(Form) 테스트 TLDR: mocking을 이용하여 software가 어떻게 사용되는지(how)를 명시적으로 테스트 할 수 있습니다. > jest.fn 테스트 케이스 작성 시에는 소프트웨어가 사용되는 how에 집중하는게 좋습니다. faker 라이브러리를 사용하여 매번 가짜 데이터를 만들 수 있습니다. 테스트 객체를 쉽게 만들기 위해 오브젝트 팩터리 함수를 사용합니다. 사용자는 Form과 상호 작용하는 데 많은 시간을 할애하며 Form은 응용 프로그램에서 가장 중요한 부분입니다 (예: 전자 상거래 앱의 "체크아웃" Form 또는 대부분의 앱의 "로그인" Form). 사용자가 Form에서 입력을 찾고, 정보를 입력하고, Form을 제출할 때 제출된 데이터가 올바른지 확인할 수 있는지를 검증합니다. 로그인 폼 검증 테스트할.. 리액트 테스트 : implementation details을 피하기 TLDR 구현 세부사항과 관련없는 테스트 사용자가 보는것처럼 테스트 마크업과 관련없는 유즈케이스 테스트 스크린 유틸리티 인터랙션 > 유저이벤트 눈에 보이는 데이터 중 핵심에 초점 이전 포스트에서 사용자가 사용하는 방법 (렌더링 결과와 프롭) => (인터랙션) => (렌더링 결과와 프롭) 측면에서 테스트해야 함을 이해했습니다. UI 측면의 테스트는 사용자가 보고, 듣고, 느끼는 것에 관한 것입니다. implementation details "구현 세부사항"은 추상화가 특정 결과를 달성하는 방법(how)을 나타내는 용어입니다. 코드의 표현력 덕분에 완전히 다른 구현 세부 사항(how)을 사용하여 동일한 결과를 얻을 수 있습니다. const multiply = (a, b) => a * b // 는 아래와 같습.. 8. 커스텀 훅 테스트 https://github.com/kentcdodds/testing-react-apps.git TLDR : 훅은 구현상세다. 훅은 리액트 컴포넌트 내에서 호출해야한다. 즉, 훅의 동작은 컴포넌트의 상태 반영을 통해서만 테스트 가능하다. 사용자는 컴포넌트에만 관심있다. 즉 훅은 구현 상세이므로, 테스트를 지양해야 한다. 공통 훅을 만들어 라이브러리로 제공하는 경우가 아니면... 1. 가장 기본적인 테스트 딱히 구현을 보여주지 않아도 어떤 테스트인지 알 수 있다. function UseCounterHookExample() { const {count, increment, decrement} = useCounter() return ( Current count: {count} Decrement Increment .. 이전 1 다음
