test: prefer isVisible in tests

Author: kantord

CLAUDE.md

@@ -202,6 +202,10 @@ pnpm generate-client:nofetch # Regenerate without fetching
 - Loading states and skeleton screens
 - Accessibility (keyboard navigation, screen readers)
 
+### Testing Best Practices
+
+- **Prefer `toBeVisible()` over `toBeInTheDocument()`** - `toBeVisible()` checks that an element is actually visible to the user (not hidden via CSS, `aria-hidden`, etc.), while `toBeInTheDocument()` only checks DOM presence. Use `toBeVisible()` for positive assertions and `.not.toBeInTheDocument()` for absence checks.
+
 ### Mocking & Testing
 
 - **MSW Auto-Mocker**
@@ -230,13 +234,13 @@ describe("ServerList", () => {
     render(<ServerList />);
 
     await waitFor(() => {
-      expect(screen.getByText("Server 1")).toBeInTheDocument();
+      expect(screen.getByText("Server 1")).toBeVisible();
     });
 
     const copyButton = screen.getByRole("button", { name: /copy url/i });
     await userEvent.click(copyButton);
 
-    expect(screen.getByText(/copied/i)).toBeInTheDocument();
+    expect(screen.getByText(/copied/i)).toBeVisible();
   });
 });
 ```

src/components/error-page/error-page.test.tsx

@@ -6,15 +6,13 @@ describe("ErrorPage", () => {
   it("displays the title", () => {
     render(<ErrorPage title="Test Error">Error description</ErrorPage>);
 
-    expect(
-      screen.getByRole("heading", { name: /test error/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /test error/i })).toBeVisible();
   });
 
   it("displays children as description", () => {
     render(<ErrorPage title="Error">This is the error message</ErrorPage>);
 
-    expect(screen.getByText(/this is the error message/i)).toBeInTheDocument();
+    expect(screen.getByText(/this is the error message/i)).toBeVisible();
   });
 
   it("displays action buttons when provided", () => {
@@ -27,9 +25,7 @@ describe("ErrorPage", () => {
       </ErrorPage>,
     );
 
-    expect(
-      screen.getByRole("button", { name: /click me/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /click me/i })).toBeVisible();
   });
 
   it("displays a decorative illustration", () => {
@@ -38,6 +34,6 @@ describe("ErrorPage", () => {
     );
 
     const svg = container.querySelector("svg[aria-hidden='true']");
-    expect(svg).toBeInTheDocument();
+    expect(svg).toBeVisible();
   });
 });