From 31b29c306fc57fd8b9e9c9adb587045cb82dd05d Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Thu, 4 Dec 2025 20:06:41 +1000
Subject: [PATCH] test: mock react-syntax-highlighter to fix ESM compatibility
 in CodeBlock tests

---
 apps/web/src/app/how-it-works/page.tsx       | 17 +++++------------
 packages/ui/src/CodeBlock/CodeBlock.test.tsx |  9 ++++++++-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/app/how-it-works/page.tsx b/apps/web/src/app/how-it-works/page.tsx
index dcbf04f..b563c4f 100644
--- a/apps/web/src/app/how-it-works/page.tsx
+++ b/apps/web/src/app/how-it-works/page.tsx
@@ -168,22 +168,15 @@ GET /api/tools?official=true`}
                 <h3 className="text-xl font-semibold mb-4 text-foreground">Execute Tools</h3>
                 <CodeBlock
                   language="typescript"
-                  code={`import { generateText } from 'ai';
+                  code={`import { streamText } from 'ai';
+import { analyzeSentiment } from '@yourname/awesome-tool';
 
-const result = await generateText({
+const result = await streamText({
   model: openai('gpt-4'),
   prompt: 'Analyze the sentiment of: I love this product!',
   tools: {
-    analyzeSentiment: {
-      description: 'Analyze sentiment of text',
-      parameters: z.object({
-        text: z.string().describe('Text to analyze'),
-      }),
-      execute: async ({ text }) => {
-        // Tool execution handled by TPMJS
-        return await executeTpmjsTool('@yourname/awesome-tool', 'analyzeSentiment', { text });
-      },
-    },
+    analyzeSentiment,  // Just import and use alongside your other tools
+    // ... your other tools
   },
 });`}
                 />
diff --git a/packages/ui/src/CodeBlock/CodeBlock.test.tsx b/packages/ui/src/CodeBlock/CodeBlock.test.tsx
index 632ca2c..746ff8b 100644
--- a/packages/ui/src/CodeBlock/CodeBlock.test.tsx
+++ b/packages/ui/src/CodeBlock/CodeBlock.test.tsx
@@ -4,7 +4,14 @@ import { CodeBlock } from './CodeBlock';
 
 // Mock react-syntax-highlighter to avoid ESM compatibility issues
 vi.mock('react-syntax-highlighter', () => ({
-  Prism: ({ children, ...props }: any) => <code {...props}>{children}</code>,
+  Prism: ({
+    children,
+    codeTagProps,
+  }: {
+    children: React.ReactNode;
+    codeTagProps?: { style?: React.CSSProperties; className?: string };
+    [key: string]: unknown;
+  }) => <code {...(codeTagProps || {})}>{children}</code>,
 }));
 
 vi.mock('react-syntax-highlighter/dist/esm/styles/prism', () => ({