카카오테크캠퍼스 2기 | STEP2 | 24일차(24-07-25) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 24일차(24-07-25) 회고

📝 통합 테스트

• Weather 컴포넌트를 통합 테스트할 때, 실제 API와 Mock API를 어떻게 활용할지 결정하는 것이 가장 큰 고민이었다. 실제 API를 사용하면 서버의 응답을 직접 테스트할 수 있지만, 네트워크 상태와 서버의 가용성에 영향을 받을 수 있다는 점이 걱정되었다. 반면, Mock API를 사용하면 외부 의존성을 제거할 수 있지만, 실제 서버의 동작을 확인할 수 없다는 점이 문제였다.

---

실제 API 테스트

• 실제 API를 사용하여 Weather 컴포넌트를 테스트하면서, 서버가 실제로 응답하는 데이터를 확인할 수 있었다. 하지만 테스트 중 네트워크 상태에 따라 결과가 달라지는 경우가 발생했고, 서버가 불안정할 때 테스트가 실패하는 문제를 경험했다.

import React from "react";
import { render, screen } from "@testing-library/react";
import Weather from "../components/Weather";

// 테스트 설명: Weather 컴포넌트가 API를 통해 날씨 정보를 가져와 화면에 표시되는지 확인
test("should display weather information", async () => {
  // Given: Weather 컴포넌트를 렌더링
  render(<Weather />);

  // Seoul 텍스트가 항상 표시되는지 확인
  expect(screen.getByText(/Seoul/i)).toBeInTheDocument(); // 'Seoul' 텍스트가 문서에 있는지 확인

  // 로딩중에는 'Loading...' 텍스트가 표시되는지 확인
  expect(screen.getByText("Loading...")).toBeInTheDocument(); // 'Loading...' 텍스트가 문서에 있는지 확인

  // When: Weather 컴포넌트가 API를 호출하여 데이터를 가져옴
  // Then: 성공시 testid가 잘 나오는지 확인 weather-info
  await screen.findByTestId("weather-info");
});

---

Mock API 테스트

• MSW(Mock Service Worker)를 사용하여 Mock API를 설정하고 Weather 컴포넌트를 테스트해 보았다. 이를 통해 실제 서버의 가용성이나 네트워크 상태에 영향을 받지 않고 안정적인 테스트 환경을 구축할 수 있었다. 특히, 백엔드 인프라가 구축되지 않은 상황에서도 원활하게 테스트를 진행할 수 있었다.

import React from "react";
import { render, screen } from "@testing-library/react";
import Weather from "../components/Weather";

// 테스트 설명: Weather 컴포넌트가 API를 통해 날씨 정보를 가져와 화면에 표시되는지 확인
test("should display weather information", async () => {
  // Given: Weather 컴포넌트를 렌더링
  render(<Weather />);

  // Seoul 텍스트가 항상 표시되는지 확인
  expect(screen.getByText(/Seoul/i)).toBeInTheDocument(); // 'Seoul' 텍스트가 문서에 있는지 확인

  // 로딩중에는 'Loading...' 텍스트가 표시되는지 확인
  expect(screen.getByText("Loading...")).toBeInTheDocument(); // 'Loading...' 텍스트가 문서에 있는지 확인

  // When: Weather 컴포넌트가 모의 데이터를 가져옴
  // Then: 모의 날씨 정보가 화면에 표시되는지 확인
  await screen.findByText(/20°C/i); // 온도가 문서에 있는지 확인
  expect(screen.getByText(/최저: 15°C \\/ 최고: 25°C/i)).toBeInTheDocument(); // 최저/최고 온도가 문서에 있는지 확인
  expect(screen.getByAltText(/rain/i)).toBeInTheDocument(); // 아이콘 설명이 문서에 있는지 확인
});

 

 

📝 Daily Scrum

• 1단계 PR 및 리뷰 반영

 

😋 Today 회고

• 실제 API를 통해 서버의 동작을 직접 확인할 수 있었고, Mock API를 통해 테스트 환경의 제약을 극복할 수 있었다. 이제는 테스트를 더 구조화하고 명확하게 작성할 수 있어, TDD 방식이 더욱 익숙해질 때까지 이 기법들을 지속적으로 활용하려고 한다.
• TDD 방식에 대한 경험이 부족하여 초기 설정과 테스트 작성에 어려움이 있었지만, 앞으로는 이를 더 적극적으로 적용하여 테스트 작성의 효율성을 높이도록 하겠다.

 

➡️ 참고 링크

https://inpa.tistory.com/entry/JEST-%F0%9F%93%9A-jest-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

[JEST] 📚 JEST 소개 & 기본 사용법 정리

https://tecoble.techcourse.co.kr/post/2021-05-25-unit-test-vs-integration-test-vs-acceptance-test/

단위 테스트 vs 통합 테스트 vs 인수 테스트