diff --git a/components/Layout.js b/components/Layout.js
index 97db117..d9472e1 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -6,8 +6,35 @@ import MobileNavigation from './MobileNavigation';
// User Profile Dropdown Component
function UserProfileDropdown({ user, onMobileMenuClose }) {
+ // Hook order is fixed for both branches; do not move this below the
+ // null-user early return — see rules-of-hooks (AGENTS.md Gotcha #11.5).
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+ // Logged-out: replace avatar + email + dropdown with a Sign-in CTA.
+ if (!user) {
+ return (
+ . The real next/link triggers prefetch on
+// mount via the router; bypassing it removes a class of jsdom flake without
+// changing the rendered DOM that the assertions inspect.
+vi.mock('next/link', () => ({
+ __esModule: true,
+ default: ({ href, children, ...rest }) => {
+ return (
+
+ {children}
+
+ );
+ },
+}));
+
+// Mock the theme context so useTheme() does not require a ThemeProvider.
+vi.mock('../../lib/theme-context', () => ({
+ useTheme: () => ({ theme: 'light', toggleTheme: vi.fn() }),
+}));
+
+import Layout from '../../components/Layout';
+
+describe('Layout — logged-out rendering (regression: P0 #7)', () => {
+ afterEach(() => cleanup());
+
+ it('does NOT render the maintainer email when no user prop is passed', () => {
+ const { container } = render(page body );
+ expect(container.textContent).not.toContain('me@randallstillwell.com');
+ });
+
+ it('does NOT render the maintainer email when user is null', () => {
+ const { container } = render(page body );
+ expect(container.textContent).not.toContain('me@randallstillwell.com');
+ });
+
+ it('renders a Sign-in link to /login when user is null', () => {
+ render(page body );
+ const links = screen.getAllByRole('link', { name: /sign in/i });
+ expect(links.length).toBeGreaterThanOrEqual(1);
+ // Both desktop sidebar + mobile drawer render UserProfileDropdown,
+ // so we expect TWO Sign-in links (one per copy).
+ for (const link of links) {
+ expect(link.getAttribute('href')).toBe('/login');
+ }
+ });
+
+ it('renders the supplied user email when user is an object', () => {
+ const { container } = render(
+ page body
+ );
+ expect(container.textContent).toContain('foo@bar.com');
+ expect(container.textContent).not.toContain('me@randallstillwell.com');
+ });
+
+ it('does NOT render a "Guest" placeholder when logged out', () => {
+ // Decision A says the logged-out copy is "Sign in", not "Guest".
+ // This test prevents a future revert that ships "Guest" as the default
+ // (which would still hide the maintainer email but skip the CTA).
+ const { container } = render(page body );
+ expect(container.textContent).not.toContain('Guest');
+ });
+});
diff --git a/vitest.config.js b/vitest.config.js
index 27fa1d0..3eab721 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -1,6 +1,18 @@
import { defineConfig } from 'vitest/config';
export default defineConfig({
+ // Repo-wide convention: React components live in .js files (Next.js
+ // pages-router style — see AGENTS.md Gotcha #9, "typescript is a devDep
+ // but the source is JavaScript-only"). Vite's default esbuild loader
+ // treats .js as plain JS and rejects JSX, which breaks any test that
+ // imports a component (e.g. test/components/Layout.test.js). This widens
+ // the JSX loader to .js so component tests work without renaming files.
+ esbuild: {
+ loader: 'jsx',
+ jsx: 'automatic',
+ include: /\.[jt]sx?$/,
+ exclude: [],
+ },
test: {
environment: 'node',
globals: false,