Files
portfolio/app/__tests__/components/Hero.test.tsx
denshooter 9fd530c68f
All checks were successful
Gitea CI / test-build (push) Successful in 11m9s
perf: convert Hero to server component for faster LCP
- Hero now renders server-side, eliminating JS dependency for LCP text
- CMS messages fetched server-side instead of client useEffect
- Removes Hero from client JS bundle (~5KB less)
- LCP element (hero paragraph) now in initial HTML response
- Eliminates 2,380ms 'element rendering delay' reported by PSI

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-03-04 14:16:58 +01:00

62 lines
1.6 KiB
TypeScript

import { render, screen } from '@testing-library/react';
import Hero from '@/app/components/Hero';
// Mock next-intl/server
jest.mock('next-intl/server', () => ({
getTranslations: () => Promise.resolve((key: string) => {
const messages: Record<string, string> = {
description: 'Dennis is a student and passionate self-hoster.',
ctaWork: 'View My Work',
ctaContact: 'Get in touch',
};
return messages[key] || key;
}),
}));
// Mock directus getMessages
jest.mock('@/lib/directus', () => ({
getMessages: () => Promise.resolve({}),
}));
// Mock next/image
interface ImageProps {
src: string;
alt: string;
fill?: boolean;
priority?: boolean;
[key: string]: unknown;
}
jest.mock('next/image', () => ({
__esModule: true,
default: ({ src, alt, fill, priority, ...props }: ImageProps) => (
<img
src={src}
alt={alt}
data-fill={fill?.toString()}
data-priority={priority?.toString()}
{...props}
/>
),
}));
describe('Hero', () => {
it('renders the hero section correctly', async () => {
const HeroResolved = await Hero({ locale: 'en' });
render(HeroResolved);
// Check for the main headlines (defaults in Hero.tsx)
expect(screen.getByText('Building')).toBeInTheDocument();
expect(screen.getByText('Stuff.')).toBeInTheDocument();
// Check for the description from our mock
expect(screen.getByText(/Dennis is a student/i)).toBeInTheDocument();
// Check for the image
expect(screen.getByAltText('Dennis Konkol')).toBeInTheDocument();
// Check for CTA
expect(screen.getByText('View My Work')).toBeInTheDocument();
});
});