인프런 커뮤니티 질문&답변

안녕하세요 Einere님~!

우선 말씀주신 대로 아래의 코드도 정상적으로 통과해야 합니다.

expect(screen.getByTestId('cart-icon')).toBeInTheDocument();
expect(
      await screen.findByRole('button', { name: 'Maria' }),
    ).toBeInTheDocument();
expect(screen.getByText('2')).toBeInTheDocument();

 NavigationBar.jsx 파일에 로그인 했을 경우 해당 장바구니의 데이터를 로컬 스토리지에서 가져와 설정하는 코드가 있는대요.

const { data, remove } = useProfile({
  config: {
    onSuccess: profile => {
      setUserData(profile);
      // 장바구니 데이터 설정
      initCart(profile.id);
    },
    enabled: !!isLogin,
  },
});

1. 로그인 상태일 경우, 프로필 조회 API가 실행

2. initCart(userId)실행

3. 로컬 스토리지에서 해당 userId에 해당하는 cart 정보를 가져와 설정(/store/cart.js))

   1. 테스트 환경에서는 로컬 스토리지 데이터가 존재하지 않음

3번째 use case를 놓친채로 테스트 로직이 작성되어 코드 수정이 필요한 부분입니다.

아래의 코드처럼 테스트 환경의 로컬 스토리지에도 cart mock 데이터를 설정하면 테스트는 정상적으로 통과합니다.

import { screen, within } from '@testing-library/react';
import { rest } from 'msw';
import React from 'react';

import NavigationBar from '@/pages/common/components/NavigationBar';
// 모듈 추가
import { setCartToLocalStorage } from '@/store/cart';
import {
  mockUseUserStore,
  mockUseCartStore,
} from '@/utils/test/mockZustandStore';
// ...
  
  beforeEach(() => {
    // ...

    const cart = {
      // ...
    };
    // 아래 코드 추가
    setCartToLocalStorage(cart, userId);
    mockUseCartStore({ cart });
  });

정리하자면 말씀하신대로 단언문의 순서와 무관하게 테스트가 통과하는 것이 맞습니다.

(코드 수정 링크)

제보해주셔서 감사드립니다..!

감사합니다.

안녕하세요, 인프런 AI 인턴입니다. Einere님.

테스트 코드에서 단언문 순서에 따라 결과가 달라지는 이유는 비동기 코드의 실행 순서와 관련이 있습니다. 특히, screen.findByRole 같은 비동기 함수는 요소가 DOM에 나타날 때까지 기다렸다가 성공적으로 찾으면 Promise를 반환합니다. 이 때문에, await을 사용하여 해당 요소가 나타날 때까지 테스트가 멈추어 기다리게 됩니다.

문제의 핵심은 이 비동기 동작이 요소가 DOM에 나타나기 전에 다른 단언문이 실행될 경우 발생할 수 있는 오류입니다. 예를 들어, findByRole을 통해 ‘Maria’ 버튼을 찾기 전에 screen.getByText('2')가 실행된다면, ‘2’라는 텍스트를 찾으려 할 때 DOM에 해당 요소가 없을 수 있어 테스트가 실패할 가능성이 있습니다.

따라서 첫 번째 expect로 요소가 존재하는지 확인한 후, 비동기 방식으로 다른 요소가 나타날 것을 기다린 후(await screen.findByRole), 마지막으로 나머지 필요한 검증을 수행하는 것이 바람직합니다.

위와 같은 상황이라면 비동기적으로 콘텐츠가 갱신되거나 추가되는 경우, 비동기 단언문을 적절하게 배치하여 기다릴 필요가 있습니다. 만약 특정 순서로 실행하지 않으면 일부 요소가 아직 렌더링되지 않았을 수 있습니다.

이해를 돕기 위해 비동기 테스트에서 활용할 수 있는 방법을 참고하시면 좋을 것 같습니다. 이 게시물에서는 비슷한 비동기 함수 사용에 대한 설명이 잘 되어 있습니다.

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