Open
Description
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();
});
});
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Activity
BangDori commentedon Jul 14, 2025
@jungpaeng overlay-kit 문서의 testing 카테고리를 정상적으로 동작시키기 위해서는 event.test.tsx 파일을 접근하여 확인해야 하는 것으로 파악했는데, 가독성을 높이기 위해서 테스트를 순수 함수와 같이 구성하여 문서만으로 이를 충분히 이해할 수 있도록 수정하는 것은 어떨까요?
renderWithUser
를 제거하고 외부 메서드 주입없이, Suggestion과 같은 방식으로 테스트를 통과하도록 하면 해당 테스팅 문서를 읽는 개발자들이 더 빠르게 테스트를 적용할 수 있을 것으로 예상됩니다.제안이 괜찮으시다면 event.test.tsx와 testing 문서 작업 진행해보겠습니다.