Pewwwjjj

이번 포스팅에서는 React-Testing-Library (줄여서 RTL) 를 활용한 HOC 테스트에 대해 정리해보려 합니다. 리액트 컴포넌트 테스트를 위해 보통 Enzyme나 RTL을 사용하는데, Enzyme가 Implementation Driven Test 방법론을 따르며 어플리케이션이 어떻게 동작하는지에 대해 초점이 맞춰진 반면, RTL은 Behavior Driven Test (행위 주도 테스트) 방법론을 기반으로 어플리케이션을 사용하는 사용자의 행동에 초점을 맞추고 있습니다. 어쨌든, 예시로 들어볼 코드는 아래와 같습니다. // loginRequired.tsx import * as React from 'react'; import {useSelector} from 'react-redux'; impo..

이번에는 Jest를 이용한 Reducer 테스트에 대해 포스팅해보려 합니다. 다만, 테스트를 위한 세팅에 대해서는 따로 설명하지 않을 예정이니 이 점 참고 부탁드립니다. 내용이 간단하여 어려운 점은 없을 것 같습니다 :D 원칙 https://redux.js.org/recipes/writing-tests/#reducers Redux # Writing Tests redux.js.org "리듀서는 액션을 이전의 상태에 적용한 후 새로운 상태를 반환해야 한다." 함수의 유닛 테스트와 같이 state와 action만 테스트 케이스에 따라 넘겨주고, 변경된 알맞은 값을 반환하는지, 그에 맞게 상태를 잘 변경하는지에 대해 테스트 코드를 작성하면 됩니다. 예시 다만 A 부분에서 현재 액션 생성 함수에 대한 테스트도 진..

들어가며 피드 관련 기능을 개발할 때 Infinite-scrolling을 구현해야 할 일이 있었습니다. 구현할 때 react-waypoint를 활용했었는데, 이번 시간에는 구현 원리와 과정을 설명해볼까 합니다. react-waypoint: https://github.com/civiccc/react-waypoint civiccc/react-waypoint A React component to execute a function whenever you scroll to an element. - civiccc/react-waypoint github.com 코드 import * as React from 'react'; import {Waypoint} from 'react-waypoint'; import style..