inflearn logo
강의

講義

知識共有

実務にすぐに適用できるフロントエンドテスト - 1部。テストの基礎:単体テスト・結合テスト

3.3. React フック テスト (feat. act 関数)

toggleIsModalOpened 테스트 할때 궁금한 점이 있습니다.

解決済みの質問

42

kangwooeum7641

投稿した質問数 1

0

제 생각에는 단순히 true가 됨을 테스트 할 것이 아닌 false => true => false와 같은 테스트 단계가 필요하다는 생각이 드는데 이런 연속적인 테스트는 어떤 식으로 구성하는 것이 좋은가요?

javascript react 소프트웨어-테스트 vitest

回答 2

0

hanjungv

안녕하세요! 답변이 조금 늦었네요.

말씀하신 것처럼 false → true → false 전체 흐름을 검증하는 것도 유효한 접근입니다.

다만 초기값 검증은 상단 테스트에서 이미 했고, 나머지 테스트들은 각각 toggle, setTrue, setFalse가 상태를 올바르게 변경하는지만 확인하는 걸로 처리했습니다.

말씀해주신 접근 물론 타당합니다. 지금처럼 단순한 경우엔 현재 구성으로 충분하지만, 상태 전이가 복잡해지면 시나리오 기반(말씀해주신!) 테스트가 더 유용할 수 있습니다.

감사합니다!

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. 강우은님. 단순히 상태를 true로 변화시키는 것이 아닌, 상태가 여러 번 토글되는 시나리오를 테스트하고자 하는 경우, 연속적인 상태 변화를 검증할 필요가 있습니다.

toggleIsModalOpened와 같은 상태 토글 기능을 정확하게 테스트하기 위해서는 여러 번의 연속된 상태 변화를 확인해야 합니다. 아래는 그러한 테스트를 구성하는 방법에 대한 간단한 설명입니다:

  1. 초기 상태 확인: 컴포넌트를 렌더링한 후 초기 상태를 검사합니다.
  2. 첫 번째 토글: toggleIsModalOpened를 호출하여 상태를 변경하고 상태가 제대로 변경되었는지 확인합니다.
  3. 두 번째 토글: 같은 메서드를 다시 호출하여 상태가 반대로 다시 변경되는지 검사합니다.

아래 예제를 참고하시면 도움이 될 것 같습니다:

it('toggleIsModalOpened가 상태를 반복적으로 변경한다.', () => {
  const { result } = renderHook(() => useYourHook()); // useYourHook는 예시 훅입니다.
  
  // 초기 상태는 false인지 검사
  expect(result.current.isModalOpened).toBe(false);
  
  // 첫 번째 토글 후 상태는 true여야 함
  act(() => {
    result.current.toggleIsModalOpened();
  });
  expect(result.current.isModalOpened).toBe(true);
  
  // 두 번째 토글 후 상태는 다시 false여야 함
  act(() => {
    result.current.toggleIsModalOpened();
  });
  expect(result.current.isModalOpened).toBe(false);
});

위 설명과 같이 단계별로 상태 변화를 검증하면, 초기 상태에 대한 기대치뿐만 아니라 상태 전환이 의도한 대로 이루어지고 있는지를 복합적으로 확인할 수 있습니다.

관련된 답변은 useDarkMode에서 state 변화 검증하는 법에서 다루는데, 여기에서는 테스트의 신뢰도를 높이기 위해 행동 패턴을 어떻게 설정할 것인지에 대해 더 나은 이해를 돕고자 합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

mockZustand

0

64

2

프로젝트 세팅 오류 및 버전 오류 문제 문의

0

95

2

로딩/에러처리 검증은 어떻게 하는게 좋을까요?

0

65

1

통합 테스트에서 API 요청에 대한 검증은 이루어지지 않아도 괜찮을까요?

0

68

2

lint에러..

0

71

1

단언문 순서에 따라 테스트 결과가 왜 달라지나요?

0

108

2

useNavigate 테스트 시, 검증 대상 질문입니다.

0

113

2

강의 예시프로젝트 업데이트좀 부탁드립니다.

2

165

2

통합테스트와 단위테스트 파일 분리

0

108

1

grid 양옆에 margin은 어디서 설정되어있는건가요 ?

0

131

1

vitest 설치했는데

0

204

2

2부 할인쿠폰 관련

0

176

1

에러 해결 방법

0

406

2

직접 구현한 atom 컴포넌트 테스트 범위 질문

0

175

1

setup, teardown 동작 순서

0

211

1

debounce 함수 테스트 정확도 관련 질문입니다.

0

175

2

ProductFilter test 어떤 방식이 더 선호되는 방식일까요?

0

203

2

통합 테스트 작성 방식에 대해 궁금한 점이 있습니다

0

258

2

vitest Extension 알려주세요.

0

266

1

2.1 강의 질문있습니다.

0

139

1

useNavigate()을 검증할 때 이해가 안되는 부분이 있습니다.

0

245

2

toHaveStyle 메서드 사용이 조금 이상한 것 같습니다.

0

194

2

TestPayment에 쿠폰 정보를 prop으로 전달하는 이유

0

184

2

NavigationBar 테스트 속도가 너무 느린 문제

0

217

1