ci: enhance GitHub Actions workflow for performance and caching

src/app/__tests__/layout.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import RootLayout, { metadata } from '../layout';
 
@@ -17,20 +17,19 @@ jest.mock('../globals.css', () => ({}));
 
 describe('RootLayout', () => {
   it('renders children correctly', () => {
-    const testContent = <div data-testid="test-content">Test content</div>;
-    const { getByTestId } = render(<RootLayout>{testContent}</RootLayout>);
+    const testContent = <div data-testid='test-content'>Test content</div>;
+    render(<RootLayout>{testContent}</RootLayout>);
 
-    expect(getByTestId('test-content')).toBeInTheDocument();
-    expect(getByTestId('test-content')).toHaveTextContent('Test content');
+    expect(screen.getByTestId('test-content')).toBeInTheDocument();
+    expect(screen.getByTestId('test-content')).toHaveTextContent('Test content');
   });
 
-  it('creates proper HTML structure with lang attribute', () => {
-    const testContent = <div>Test</div>;
-    const { container } = render(<RootLayout>{testContent}</RootLayout>);
-    
-    // The component returns JSX with html and body elements
-    // We can test that the component renders without errors
-    expect(container.firstChild).toBeInTheDocument();
+  it('creates proper HTML structure', () => {
+    const testContent = <div data-testid='layout-child'>Test</div>;
+    render(<RootLayout>{testContent}</RootLayout>);
+
+    // Verify the child component is rendered correctly
+    expect(screen.getByTestId('layout-child')).toBeInTheDocument();
   });
 
   it('has correct metadata export', () => {
@@ -39,12 +38,12 @@ describe('RootLayout', () => {
     expect(metadata.description).toBe('Generated by create next app');
   });
 
-  it('applies font classes correctly', () => {
-    // Test that the component can be instantiated and called
-    const testContent = <div>Test</div>;
-    const renderResult = render(<RootLayout>{testContent}</RootLayout>);
-    
-    // Just ensure it renders without throwing errors
-    expect(renderResult.container).toBeInTheDocument();
+  it('renders without errors', () => {
+    const testContent = <div data-testid='render-test'>Test</div>;
+    const view = render(<RootLayout>{testContent}</RootLayout>);
+
+    // Verify the component renders successfully
+    expect(screen.getByTestId('render-test')).toBeInTheDocument();
+    expect(view.container).toBeInTheDocument();
   });
-}); 
+});