Skip to content

오버레이 닫기 예제에서 OverlayProvider 누락으로 인한 테스트 실패 #176

Open
@BangDori

Description

@BangDori

Problem

안녕하세요. 문서의 테스팅 가이드를 참고하여 vitest 기반으로 테스트를 작성하던 중, 오버레이 닫기 예제에서 테스트 실행이 되지 않는 문제가 있어 공유드립니다.

오버레이 닫기 예제 코드에서 다음과 같은 이슈가 있었습니다.

  • renderWithUser 함수가 문서에 정의되어 있지 않아, 그대로 실행할 경우 테스트 실패로 이어집니다.
  • 또한 renderWithUserrender로 변경하더라도, OverlayProvider로 감싸지 않는다면 overlay.open()이 정상적으로 동작하지 않아 테스트에 실패하게 됩니다.

Using Library

  • "@testing-library/jest-dom": "^6.6.3"
  • "@testing-library/react": "^16.3.0"
  • vitest@3.2.3

Suggestion

문서의 예제를 아래와 같이 수정하면, OverlayProvider를 포함한 환경에서 바로 실행 가능한 테스트가 될 수 있을 것 같습니다.

it('should be able to close an open overlay using overlay.unmount', async () => {
  const overlayDialogContent = 'context-modal-overlay-dialog-content';
+  const user = userEvent.setup();
 
  function Component() {
    useEffect(() => {
      overlay.open(({ isOpen, overlayId }) => {
        return isOpen && <button onClick={() => overlay.unmount(overlayId)}>{overlayDialogContent}</button>;
      });
    }, []);
 
    return <div>Empty</div>;
  }
 
- const { user } = renderWithUser(<Component />);
+ render(<Component />, { wrapper: OverlayProvider });
  await user.click(await screen.findByRole('button', { name: overlayDialogContent }));
 
  await waitFor(() => {
    expect(screen.queryByRole('button', { name: overlayDialogContent })).not.toBeInTheDocument();
  });
});

Activity

self-assigned this
on Jun 16, 2025
BangDori

BangDori commented on Jul 14, 2025

@BangDori
Author

@jungpaeng overlay-kit 문서의 testing 카테고리를 정상적으로 동작시키기 위해서는 event.test.tsx 파일을 접근하여 확인해야 하는 것으로 파악했는데, 가독성을 높이기 위해서 테스트를 순수 함수와 같이 구성하여 문서만으로 이를 충분히 이해할 수 있도록 수정하는 것은 어떨까요?

renderWithUser를 제거하고 외부 메서드 주입없이, Suggestion과 같은 방식으로 테스트를 통과하도록 하면 해당 테스팅 문서를 읽는 개발자들이 더 빠르게 테스트를 적용할 수 있을 것으로 예상됩니다.

제안이 괜찮으시다면 event.test.tsx와 testing 문서 작업 진행해보겠습니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @jungpaeng@BangDori

      Issue actions

        오버레이 닫기 예제에서 OverlayProvider 누락으로 인한 테스트 실패 · Issue #176 · toss/overlay-kit