@qwickapps/react-framework 1.4.9 → 1.5.0

package/src/__tests__/components/Footer.test.tsx

@@ -105,7 +105,7 @@ const sampleItems: FooterItem[] = [
 ];
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -314,9 +314,9 @@ describe.skip('Footer', () => {
     });
 
     it('renders with custom CSS classes and styles', () => {
-      const { container } = render(
+      render(
         <TestWrapper>
-          <Footer 
+          <Footer
             sections={sampleSections}
             className="custom-footer"
             sx={{ backgroundColor: 'red' }}

package/src/__tests__/components/FormBlock.test.tsx

@@ -97,7 +97,7 @@ const MockFooter: React.FC = () => (
 );
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any; appName?: string }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown; appName?: string }> = ({ 
   children, 
   dataProvider,
   appName = 'Test App'
@@ -652,7 +652,7 @@ describe('FormBlock', () => {
     it.skip('preserves component marking for QwickApp framework', () => {
       // The component should be marked as a QwickApp component
       // This is important for framework identification - test skipped due to test environment limitations
-      const formBlockComponent = FormBlock as any;
+      const formBlockComponent = FormBlock as unknown as { QWICKAPP_COMPONENT?: boolean };
       expect(formBlockComponent.QWICKAPP_COMPONENT).toBeTruthy();
     });
   });

package/src/__tests__/components/HeroBlock.integration.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render, waitFor, screen } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import HeroBlock from '../../blocks/HeroBlock';
 import { DataProvider } from '../../../contexts/DataContext';
 import { JsonDataProvider } from '@qwickapps/schema';

package/src/__tests__/components/HeroBlock.test.tsx

@@ -58,7 +58,7 @@ const sampleActions: ButtonProps[] = [
 ];
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -242,9 +242,9 @@ describe('HeroBlock', () => {
     });
 
     it('renders with custom CSS classes and styles', () => {
-      const { container } = render(
+      render(
         <TestWrapper>
-          <HeroBlock 
+          <HeroBlock
             title="Custom Hero"
             className="custom-hero"
             sx={{ backgroundColor: 'red' }}
@@ -680,7 +680,7 @@ describe('HeroBlock', () => {
       
       expect(parsedData.data).toHaveProperty('title', 'Minimal Hero');
       // undefined properties should be either excluded or set to undefined
-      expect(parsedData.data.subtitle === undefined || !parsedData.data.hasOwnProperty('subtitle')).toBe(true);
+      expect(parsedData.data.subtitle === undefined || !Object.prototype.hasOwnProperty.call(parsedData.data, 'subtitle')).toBe(true);
       
       const deserializedComponent = ComponentTransformer.deserialize(serializedData);
       expect(React.isValidElement(deserializedComponent)).toBe(true);

package/src/__tests__/components/HtmlInputField.test.tsx

@@ -81,7 +81,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -316,7 +316,7 @@ describe.skip('HtmlInputField', () => {
         selectionEnd: 5,
         setSelectionRange: jest.fn(),
         focus: jest.fn()
-      } as any;
+      } as unknown as HTMLTextAreaElement;
       
       jest.spyOn(document, 'getElementById').mockReturnValue(mockTextarea);
       
@@ -345,7 +345,7 @@ describe.skip('HtmlInputField', () => {
         selectionEnd: 5,
         setSelectionRange: jest.fn(),
         focus: jest.fn()
-      } as any;
+      } as unknown as HTMLTextAreaElement;
       
       jest.spyOn(document, 'getElementById').mockReturnValue(mockTextarea);
       
@@ -475,8 +475,8 @@ describe.skip('HtmlInputField', () => {
         selectionEnd: 4,
         setSelectionRange: jest.fn(),
         focus: jest.fn()
-      } as any;
-      
+      } as unknown as HTMLTextAreaElement;
+
       jest.spyOn(document, 'getElementById').mockReturnValue(mockTextarea);
       
       const handleChange = jest.fn();
@@ -644,7 +644,7 @@ describe.skip('HtmlInputField', () => {
     it.skip('preserves component marking for QwickApp framework', () => {
       // The component should be marked as a QwickApp component
       // This is important for framework identification - test skipped due to test environment limitations
-      const htmlInputFieldComponent = HtmlInputField as any;
+      const htmlInputFieldComponent = HtmlInputField as unknown as { QWICKAPP_COMPONENT?: boolean };
       expect(htmlInputFieldComponent.QWICKAPP_COMPONENT).toBeTruthy();
     });
   });
@@ -707,8 +707,8 @@ describe.skip('HtmlInputField', () => {
         selectionEnd: 4,
         setSelectionRange: jest.fn(),
         focus: jest.fn()
-      } as any;
-      
+      } as unknown as HTMLTextAreaElement;
+
       jest.spyOn(document, 'getElementById').mockReturnValue(mockTextarea);
       
       const handleChange = jest.fn();

package/src/__tests__/components/PageBannerHeader.test.tsx

@@ -79,7 +79,7 @@ const mockActions = [
 ];
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -247,9 +247,9 @@ describe('PageBannerHeader', () => {
     });
 
     it('renders with custom height', () => {
-      const { container } = render(
+      render(
         <TestWrapper>
-          <PageBannerHeader 
+          <PageBannerHeader
             title="Custom Height"
             coverImage="/test-cover.jpg"
             height={400}
@@ -505,8 +505,8 @@ describe('PageBannerHeader', () => {
       process.env.NODE_ENV = 'production';
       
       const emptyDataProvider = new JsonDataProvider({ data: {} });
-      
-      const { container } = render(
+
+      render(
         <TestWrapper dataProvider={emptyDataProvider}>
           <PageBannerHeader dataSource="pageBannerHeaders.nonexistentData" />
         </TestWrapper>
@@ -588,9 +588,9 @@ describe('PageBannerHeader', () => {
     });
 
     it('handles custom CSS classes and styles', () => {
-      const { container } = render(
+      render(
         <TestWrapper>
-          <PageBannerHeader 
+          <PageBannerHeader
             title="Custom Styled"
             className="custom-header"
             sx={{ border: '1px solid red' }}

package/src/__tests__/components/PaletteSwitcher.test.tsx

@@ -102,7 +102,7 @@ jest.mock('../../contexts', () => ({
 }));
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -633,7 +633,7 @@ describe.skip('PaletteSwitcher', () => {
     it.skip('preserves component marking for QwickApp framework', () => {
       // The component should be marked as a QwickApp component
       // This is important for framework identification - test skipped due to test environment limitations
-      const paletteSwitcherComponent = PaletteSwitcher as any;
+      const paletteSwitcherComponent = PaletteSwitcher as unknown as { QWICKAPP_COMPONENT?: boolean };
       expect(paletteSwitcherComponent.QWICKAPP_COMPONENT).toBeTruthy();
     });
   });
@@ -828,7 +828,7 @@ describe.skip('PaletteSwitcher', () => {
     it('handles invalid button sizes gracefully', () => {
       render(
         <TestWrapper>
-          <PaletteSwitcher buttonSize={'invalid' as any} />
+          <PaletteSwitcher buttonSize={'invalid' as 'small' | 'medium' | 'large'} />
         </TestWrapper>
       );
 

package/src/__tests__/components/ProductCard.test.tsx

@@ -75,7 +75,7 @@ Object.defineProperty(window, 'open', {
 });
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (

package/src/__tests__/components/Section.integration.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render, waitFor, screen } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import Section from '../../components/blocks/Section';
 import { DataProvider } from '../../contexts/DataContext';
 import { JsonDataProvider } from '@qwickapps/schema';

package/src/__tests__/components/Section.test.tsx

@@ -51,7 +51,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (

package/src/__tests__/components/SelectInputField.test.tsx

@@ -98,7 +98,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -673,7 +673,7 @@ describe.skip('SelectInputField', () => {
     it.skip('preserves component marking for QwickApp framework', () => {
       // The component should be marked as a QwickApp component
       // This is important for framework identification - test skipped due to test environment limitations
-      const selectInputFieldComponent = SelectInputField as any;
+      const selectInputFieldComponent = SelectInputField as unknown as { QWICKAPP_COMPONENT?: boolean };
       expect(selectInputFieldComponent.QWICKAPP_COMPONENT).toBeTruthy();
     });
   });

package/src/__tests__/components/TextInputField.test.tsx

@@ -87,7 +87,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -592,7 +592,7 @@ describe('TextInputField', () => {
     it.skip('preserves component marking for QwickApp framework', () => {
       // The component should be marked as a QwickApp component
       // This is important for framework identification - test skipped due to test environment limitations
-      const textInputFieldComponent = TextInputField as any;
+      const textInputFieldComponent = TextInputField as unknown as { QWICKAPP_COMPONENT?: boolean };
       expect(textInputFieldComponent.QWICKAPP_COMPONENT).toBeTruthy();
     });
   });
@@ -674,7 +674,7 @@ describe('TextInputField', () => {
       );
 
       const field1 = screen.getByRole('textbox', { name: 'Field 1' });
-      const field2 = screen.getByRole('textbox', { name: 'Field 2' });
+      screen.getByRole('textbox', { name: 'Field 2' });
 
       field1.focus();
       expect(document.activeElement).toBe(field1);
@@ -726,7 +726,7 @@ describe('TextInputField', () => {
     it('handles invalid type gracefully', () => {
       render(
         <TestWrapper>
-          <TextInputField label="Invalid Type" type={'invalid-type' as any} />
+          <TextInputField label="Invalid Type" type={'invalid-type' as 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'} />
         </TestWrapper>
       );
 

package/src/__tests__/components/ThemeSwitcher.test.tsx

@@ -89,7 +89,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -625,7 +625,7 @@ describe('ThemeSwitcher', () => {
     it.skip('preserves component marking for QwickApp framework', () => {
       // The component should be marked as a QwickApp component
       // This is important for framework identification - test skipped due to test environment limitations
-      const themeSwitcherComponent = ThemeSwitcher as any;
+      const themeSwitcherComponent = ThemeSwitcher as unknown as { QWICKAPP_COMPONENT?: boolean };
       expect(themeSwitcherComponent.QWICKAPP_COMPONENT).toBeTruthy();
     });
   });
@@ -704,7 +704,7 @@ describe('ThemeSwitcher', () => {
     it('handles invalid menu positions gracefully', () => {
       render(
         <TestWrapper>
-          <ThemeSwitcher menuPosition={'invalid' as any} />
+          <ThemeSwitcher menuPosition={'invalid' as 'left' | 'right'} />
         </TestWrapper>
       );
 

package/src/__tests__/components/base/Container.test.tsx

@@ -9,7 +9,7 @@
  */
 
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ThemeProvider, PaletteProvider } from '../../../contexts';
 import { Container, type ContainerProps } from '../../../components/base/Container';
@@ -355,7 +355,7 @@ describe('Container', () => {
       const styleObj = { margin: '5px' };
       render(
         <TestWrapper>
-          <Container style={styleObj as any} />
+          <Container style={styleObj as React.CSSProperties} />
         </TestWrapper>
       );
 
@@ -490,7 +490,7 @@ describe('Container', () => {
       const clickHandler = jest.fn();
       render(
         <TestWrapper>
-          <Container onClick={clickHandler as any} />
+          <Container onClick={clickHandler as React.MouseEventHandler} />
         </TestWrapper>
       );
 
@@ -782,7 +782,7 @@ describe('Container', () => {
         <TestWrapper>
           <Container
             className={undefined}
-            id={null as any}
+            id={null as unknown as string}
             span=""
           />
         </TestWrapper>
@@ -870,19 +870,19 @@ describe('Container', () => {
   });
 
   describe('Serialization with Event Handlers', () => {
-    it('should serialize Container with onClick handler without circular reference error', () => {
+    it('should serialize Container with onClick handler without circular reference error', async () => {
       // Import ComponentTransformer and registry for testing
-      const { ComponentTransformer } = require('../../../schemas/transformers/ComponentTransformer');
+      const { ComponentTransformer } = await import('../../../schemas/transformers/ComponentTransformer');
       // Ensure components are registered
-      require('../../../schemas/transformers/registry');
-      
+      await import('../../../schemas/transformers/registry');
+
       // Create a Container with onClick handler
       const containerWithHandler = (
         <Container
           span={12}
           padding="large"
           background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
-          onClick={(event) => { console.log("Container clicked!"); }}
+          onClick={() => { console.log("Container clicked!"); }}
           role="button"
           aria-label="Clickable container"
         >
@@ -908,18 +908,19 @@ describe('Container', () => {
       }).not.toThrow();
     });
 
-    it('should handle multiple event handlers in serialization', () => {
-      const { ComponentTransformer } = require('../../../schemas/transformers/ComponentTransformer');
+    it('should handle multiple event handlers in serialization', async () => {
+      // Import ComponentTransformer and registry for testing
+      const { ComponentTransformer } = await import('../../../schemas/transformers/ComponentTransformer');
       // Ensure components are registered
-      require('../../../schemas/transformers/registry');
+      await import('../../../schemas/transformers/registry');
       
       const containerWithMultipleHandlers = (
         <Container
-          onClick={(event) => { console.log("clicked"); }}
-          onMouseEnter={(event) => { console.log("mouse enter"); }}
-          onMouseLeave={(event) => { console.log("mouse leave"); }}
-          onFocus={(event) => { console.log("focused"); }}
-          onBlur={(event) => { console.log("blurred"); }}
+          onClick={() => { console.log("clicked"); }}
+          onMouseEnter={() => { console.log("mouse enter"); }}
+          onMouseLeave={() => { console.log("mouse leave"); }}
+          onFocus={() => { console.log("focused"); }}
+          onBlur={() => { console.log("blurred"); }}
         >
           Multi-handler container
         </Container>
@@ -939,16 +940,16 @@ describe('Container', () => {
       }).not.toThrow();
     });
 
-    it('should round-trip serialize and deserialize Container with event handlers', () => {
-      const { ComponentTransformer } = require('../../../schemas/transformers/ComponentTransformer');
+    it('should round-trip serialize and deserialize Container with event handlers', async () => {
+      const { ComponentTransformer } = await import('../../../schemas/transformers/ComponentTransformer');
       // Ensure components are registered
-      require('../../../schemas/transformers/registry');
+      await import('../../../schemas/transformers/registry');
       
       const originalContainer = (
         <Container
           span={6}
           padding="medium"
-          onClick={(event) => { console.log("original handler"); }}
+          onClick={() => { console.log("original handler"); }}
         >
           Round-trip test
         </Container>

package/src/__tests__/components/blocks/Code.performance.test.tsx

@@ -194,7 +194,7 @@ interface QueryResult<T = any> {
 }
 
 type EventHandler<T = any> = (event: T) => void | Promise<void>;
-type QueryBuilder = (query: string, params?: any[]) => Promise<QueryResult>;
+type QueryBuilder = (query: string, params?: unknown[]) => Promise<QueryResult>;
 
 class EnterpriseDatabase {
   private connections: Map<string, DatabaseConnection> = new Map();
@@ -218,7 +218,7 @@ class EnterpriseDatabase {
 
   async query<T = any>(
     sql: string, 
-    params: any[] = [], 
+    params: unknown[] = [], 
     options: QueryOptions = {}
   ): Promise<QueryResult<T>> {
     const startTime = performance.now();
@@ -283,7 +283,7 @@ class EnterpriseDatabase {
     }
   }
 
-  private generateQueryId(sql: string, params: any[]): string {
+  private generateQueryId(sql: string, params: unknown[]): string {
     return btoa(sql + JSON.stringify(params)).replace(/[^a-zA-Z0-9]/g, '').substring(0, 32);
   }
 
@@ -313,7 +313,7 @@ export { EnterpriseDatabase, type DatabaseConnection, type QueryOptions, type Qu
 describe('Code Component Performance Tests', () => {
   beforeEach(() => {
     ComponentTransformer.clearRegistry();
-    ComponentTransformer.registerComponent(Code as any);
+    ComponentTransformer.registerComponent(Code as unknown as React.ComponentType);
   });
 
   afterEach(() => {
@@ -558,7 +558,7 @@ describe('Code Component Performance Tests', () => {
 
   describe('Memory Usage Validation', () => {
     it('should not cause memory leaks during repeated operations', () => {
-      const initialMemory = (performance as any).memory?.usedJSHeapSize || 0;
+      const initialMemory = (performance as unknown as { memory?: { usedJSHeapSize?: number } }).memory?.usedJSHeapSize || 0;
       
       const codeElement = (
         <Code language="javascript" title="memory-test.js">
@@ -569,15 +569,15 @@ describe('Code Component Performance Tests', () => {
       // Perform many operations
       for (let i = 0; i < 1000; i++) {
         const serialized = ComponentTransformer.serialize(codeElement);
-        const deserialized = ComponentTransformer.deserialize(serialized);
-        
+        ComponentTransformer.deserialize(serialized);
+
         // Force garbage collection hint (if available)
-        if (typeof global !== 'undefined' && (global as any).gc) {
-          if (i % 100 === 0) (global as any).gc();
+        if (typeof global !== 'undefined' && (global as unknown as { gc?: () => void }).gc) {
+          if (i % 100 === 0) (global as unknown as { gc?: () => void }).gc?.();
         }
       }
 
-      const finalMemory = (performance as any).memory?.usedJSHeapSize || 0;
+      const finalMemory = (performance as unknown as { memory?: { usedJSHeapSize?: number } }).memory?.usedJSHeapSize || 0;
       
       if (initialMemory > 0 && finalMemory > 0) {
         const memoryIncrease = finalMemory - initialMemory;

package/src/__tests__/components/blocks/Code.serialization.test.tsx

@@ -54,10 +54,10 @@ describe('Code Component Serialization', () => {
     it('should register with correct tagName and version', () => {
       expect(Code.tagName).toBe('Code');
       expect(Code.version).toBe('1.0.0');
-      
+
       // Register the component
-      ComponentTransformer.registerComponent(Code as any);
-      
+      ComponentTransformer.registerComponent(Code as unknown as React.ComponentType);
+
       // Verify it's registered
       const registeredComponents = ComponentTransformer.getRegisteredComponents();
       expect(registeredComponents).toContain('Code');
@@ -339,7 +339,7 @@ describe('Code Component Serialization', () => {
   describe('ComponentTransformer Integration', () => {
     beforeEach(() => {
       // Register the Code component for these tests
-      ComponentTransformer.registerComponent(Code as any);
+      ComponentTransformer.registerComponent(Code as unknown as React.ComponentType);
     });
 
     it('should work with ComponentTransformer serialize/deserialize', () => {
@@ -381,13 +381,13 @@ describe('Code Component Serialization', () => {
       const deserializedElement = ComponentTransformer.deserialize(serializedString);
 
       // Render both to verify they work the same
-      const { container: originalContainer } = render(
+      render(
         <TestWrapper>
           {originalElement}
         </TestWrapper>
       );
 
-      const { container: deserializedContainer } = render(
+      render(
         <TestWrapper>
           {deserializedElement as React.ReactElement}
         </TestWrapper>
@@ -467,9 +467,9 @@ describe('Code Component Serialization', () => {
 
     it('should handle serialization of invalid props', () => {
       const invalidProps = {
-        children: undefined as any,
-        language: null as any,
-        showCopy: 'invalid' as any
+        children: undefined as unknown as string,
+        language: null as unknown as string,
+        showCopy: 'invalid' as unknown as boolean
       };
 
       const codeInstance = new Code(invalidProps);

package/src/__tests__/components/blocks/HeroBlock.serialization.test.tsx

@@ -8,7 +8,6 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import HeroBlock from '../../../components/blocks/HeroBlock';
 import { ComponentTransformer } from '../../../schemas/transformers/ComponentTransformer';
@@ -400,8 +399,8 @@ describe('HeroBlock Serialization', () => {
       // Verify nested structure (actions array)
       expect(parsedData.data.actions).toBeInstanceOf(Array);
       expect(parsedData.data.actions).toHaveLength(3);
-      
-      parsedData.data.actions.forEach((action: any, index: number) => {
+
+      parsedData.data.actions.forEach((action: Record<string, unknown>, index: number) => {
         expect(action).toHaveProperty('label');
         expect(action).toHaveProperty('variant');
         expect(action.label).toBe(`Action ${index + 1}`);

package/src/__tests__/components/blocks/Image.serialization.test.tsx

@@ -8,7 +8,6 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ComponentTransformer } from '../../../schemas/transformers/ComponentTransformer';
 import { Image } from '../../../components/blocks/Image';
@@ -17,9 +16,9 @@ describe('Image Serialization', () => {
   beforeEach(() => {
     // Clear component registry for clean tests
     ComponentTransformer.clearRegistry();
-    
+
     // Register Image component
-    ComponentTransformer.registerComponent(Image as any);
+    ComponentTransformer.registerComponent(Image as unknown as React.ComponentType);
   });
 
   afterEach(() => {
@@ -121,9 +120,10 @@ describe('Image Serialization', () => {
 
   describe('ModelView Integration', () => {
     it('should have correct static properties', () => {
-      expect((Image as any).tagName).toBe('Image');
-      expect((Image as any).version).toBe('1.0.0');
-      expect(typeof (Image as any).fromJson).toBe('function');
+      const ImageStatic = Image as unknown as { tagName: string; version: string; fromJson: (data: unknown) => React.ReactElement };
+      expect(ImageStatic.tagName).toBe('Image');
+      expect(ImageStatic.version).toBe('1.0.0');
+      expect(typeof ImageStatic.fromJson).toBe('function');
     });
 
     it('should create instance with toJson method', () => {
@@ -147,7 +147,8 @@ describe('Image Serialization', () => {
         height: 200
       };
 
-      const component = (Image as any).fromJson(jsonData);
+      const ImageStatic = Image as unknown as { fromJson: (data: Record<string, unknown>) => React.ReactElement };
+      const component = ImageStatic.fromJson(jsonData);
       expect(React.isValidElement(component)).toBe(true);
     });
   });