test: add vitest-fail-on-console and improve test stability (#170)

* test: add vitest-fail-on-console and improve test stability

- Integrate `vitest-fail-on-console` plugin to ensure console logs cause test failures
- Use `act` to wrap asynchronous updates in test interactions
- Add `happy-dom` for improved test environment compatibility
- Update test descriptions to remove async usage where unnecessary

* feat: enhance button accessibility and update tsconfig with testing types

- Add 'type="button"' to improve button element accessibility in test files
- Include 'vitest/globals' and '@testing-library/jest-dom' types in tsconfig for better testing support

* Create grumpy-ways-look.md

---------

Co-authored-by: Hayden Bleasel <[email protected]>

Author: tobiasbueschel

.changeset/grumpy-ways-look.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+test: add vitest-fail-on-console and improve test stability

packages/elements/__tests__/actions.test.tsx

@@ -6,7 +6,7 @@ describe("Actions", () => {
   it("renders children", () => {
     render(
       <Actions>
-        <button>Test Action</button>
+        <button type="button">Test Action</button>
       </Actions>
     );
     expect(screen.getByText("Test Action")).toBeInTheDocument();
@@ -15,7 +15,7 @@ describe("Actions", () => {
   it("applies custom className", () => {
     const { container } = render(
       <Actions className="custom-class">
-        <button>Test</button>
+        <button type="button">Test</button>
       </Actions>
     );
     expect(container.firstChild).toHaveClass("custom-class");

packages/elements/__tests__/artifact.test.tsx

@@ -66,7 +66,7 @@ describe("ArtifactActions", () => {
   it("renders action buttons", () => {
     render(
       <ArtifactActions>
-        <button>Action 1</button>
+        <button type="button">Action 1</button>
       </ArtifactActions>
     );
     expect(screen.getByText("Action 1")).toBeInTheDocument();

packages/elements/__tests__/chain-of-thought.test.tsx

@@ -186,7 +186,7 @@ describe("ChainOfThoughtImage", () => {
     render(
       <ChainOfThought>
         <ChainOfThoughtImage>
-          <img alt="test" src="test.jpg" />
+          <img alt="test" height={100} src="test.jpg" width={100} />
         </ChainOfThoughtImage>
       </ChainOfThought>
     );
@@ -198,7 +198,7 @@ describe("ChainOfThoughtImage", () => {
     render(
       <ChainOfThought>
         <ChainOfThoughtImage caption="Image caption">
-          <img alt="test" src="test.jpg" />
+          <img alt="test" height={100} src="test.jpg" width={100} />
         </ChainOfThoughtImage>
       </ChainOfThought>
     );

packages/elements/__tests__/code-block.test.tsx

@@ -36,7 +36,7 @@ describe("CodeBlock", () => {
   it("renders children actions", () => {
     render(
       <CodeBlock code="code" language="javascript">
-        <button>Action</button>
+        <button type="button">Action</button>
       </CodeBlock>
     );
     expect(screen.getByText("Action")).toBeInTheDocument();

packages/elements/__tests__/plan.test.tsx

@@ -406,7 +406,7 @@ describe("Plan", () => {
     });
 
     it("applies custom className", () => {
-      const { container } = render(
+      render(
         <Plan>
           <PlanHeader>
             <PlanTrigger className="custom-trigger" />

packages/elements/__tests__/prompt-input.test.tsx

@@ -501,7 +501,7 @@ describe("PromptInputTextarea", () => {
     expect(onSubmit).not.toHaveBeenCalled();
   });
 
-  it("does not submit on Enter during IME composition - #21", async () => {
+  it("does not submit on Enter during IME composition - #21", () => {
     const onSubmit = vi.fn();
 
     render(
@@ -1021,7 +1021,7 @@ describe("Paste functionality", () => {
     });
   });
 
-  it("handles paste with no files", async () => {
+  it("handles paste with no files", () => {
     const onSubmit = vi.fn();
 
     render(
@@ -1126,7 +1126,9 @@ describe("PromptInputSpeechButton", () => {
     if (button) {
       // Start listening
       await user.click(button);
-      mockRecognition.onstart?.();
+      act(() => {
+        mockRecognition.onstart?.();
+      });
 
       // Stop listening
       await user.click(button);
@@ -1698,9 +1700,8 @@ describe("PromptInputTab components", () => {
 });
 
 describe("PromptInputModelSelect components", () => {
-  it("renders model select with all subcomponents", async () => {
+  it("renders model select with all subcomponents", () => {
     const onSubmit = vi.fn();
-    const user = userEvent.setup();
 
     render(
       <PromptInput onSubmit={onSubmit}>

packages/elements/__tests__/reasoning.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import {
@@ -85,7 +85,9 @@ describe("Reasoning", () => {
     expect(screen.getByText("Reasoning content")).toBeVisible();
 
     // Advance time past AUTO_CLOSE_DELAY (3000ms)
-    vi.advanceTimersByTime(3100);
+    act(() => {
+      vi.advanceTimersByTime(3100);
+    });
 
     // Should auto-close
     await vi.waitFor(() => {

packages/elements/__tests__/setup.ts

@@ -1,6 +1,7 @@
 import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
 import { afterEach, vi } from "vitest";
+import failOnConsole from "vitest-fail-on-console";
 
 // Mock CSS imports
 vi.mock("*.css", () => ({}));
@@ -41,6 +42,45 @@ Object.defineProperty(window, "matchMedia", {
   })),
 });
 
+// Patch createElement to handle SVG elements properly in jsdom
+const SVG_TAGS = new Set([
+  "svg",
+  "path",
+  "circle",
+  "g",
+  "rect",
+  "line",
+  "polyline",
+  "polygon",
+  "ellipse",
+  "text",
+  "tspan",
+  "defs",
+  "clipPath",
+]);
+
+const originalCreateElement = document.createElement.bind(document);
+// @ts-expect-error - Overriding createElement signature for test environment
+document.createElement = (
+  tagName: string,
+  options?: ElementCreationOptions
+) => {
+  if (SVG_TAGS.has(tagName.toLowerCase())) {
+    return document.createElementNS("http://www.w3.org/2000/svg", tagName);
+  }
+  return originalCreateElement(tagName, options);
+};
+
+// Fail the test if there are any console logs during test execution
+failOnConsole({
+  shouldFailOnAssert: true,
+  shouldFailOnDebug: true,
+  shouldFailOnInfo: true,
+  shouldFailOnWarn: true,
+  shouldFailOnError: true,
+  shouldFailOnLog: true,
+});
+
 // Cleanup after each test
 afterEach(() => {
   cleanup();

packages/elements/package.json

@@ -37,6 +37,7 @@
     "@vitest/coverage-v8": "^4.0.4",
     "jsdom": "^26.0.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.4"
+    "vitest": "^4.0.4",
+    "vitest-fail-on-console": "^0.10.1"
   }
 }