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

[BangDori]

Problem

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

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

• renderWithUser 함수가 문서에 정의되어 있지 않아, 그대로 실행할 경우 테스트 실패로 이어집니다.
• 또한 renderWithUser를 render로 변경하더라도, 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();
  });
});

[BangDori]

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

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

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