TDD/JEST+React Test(3)
-
React Testing 테스트 중에 act를 사용해야 할때
act가 필요한 경우1. 컴포넌트 내부에 비동기 작업이 있을 때useEffect 내 비동기 작업API 호출 (axios, fetch 등)// 예시await act(async () => {render();});2. 상태 업데이트가 있는 경우useState 사용setState 호출act(() => {fireEvent.click(button); // 상태 변경 발생});3. 타이머 사용시setTimeout, setIntervalact(() => {jest.runAllTimers(); // 타이머 실행});act가 필요없는 경우1. 단순 렌더링 체크render();expect(screen.getByText("hello")).toBeInTheDocument();2. 이미 act를 포함하는 메서드 사용시fire..
2025.04.26 -
JEST, React Testing Library 실제 해보기
그렇다면 이제 본격적으로 3,6,9 게임을 하는 컴포넌트를 만들어 보려고 한다.그렇다면 규칙을 명확하게 세워야한다.숫자에 3, 6, 9가 들어가는 경우 박수를 친다.3, 6, 9 가 여러번 들어가면 그 n개 만큼 박수를 친다.결과적으로 말하자면 3, 6, 9가 들어갔나 판별하기3, 6, 9의 개수 만큼 박수치기를 해야한다.1. 3, 6, 9가 들어갈 경우 true 반환하게 하기 const shouldShowClap = (num: number): boolean => { return num.toString().includes('3')|| num.toString().includes('6')|| num.toString().includes('9'); };3이나 6이..
2025.04.17 -
TDD(Test Driven Development)와 테스팅 도구 Jest, React Testing Library
TDDTDD(Test Driven Development)는 테스트 주도 개발을 의미한다.일종의 개발 방법론인데 정식 코드를 먼저 만들지 않고 테스트 코드를 만든다음에 테스트를 통과한 이후에 정식 코드를 개선하는 방식으로 개발을 하는 방법이다. 테스트를 먼저 작성하고, 그 후에 실제 코드를 개발 : Red(실패) → Green(성공) → Refactor(개선) 단계를 반복한다.실패하는 테스트 작성 → 테스트를 통과하는 최소한의 코드 작성 → 코드 리팩토링 순서로 진행된다. 테스트가 성공한다는 것은 1차적으로 코드가 작동한다는 것을 의미하기 때문에 아래와 같은 장점이 있다.코드의 품질과 신뢰성 향상버그 발생 가능성 감소유지보수가 용이과도한 설계를 방지또한 이런 테스트를 위한 도구로는 Jest나 React T..
2025.04.16