cd frontend npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom
Please add this test script to your package.json:
Context: We need to ensure that the UI doesn't break when we fix the user object types.
Primary Task: Create frontend/tests/components/NavBar.test.tsx.
Specific Test Cases:
Guest State: Assert that "Log In" and "Sign Up" buttons are visible when user is null.
Auth State: Mock the useAuth hook. Assert that "Hello, [Name]" appears and the "Log Out" button exists.
Interaction: Simulate a click on "Log Out" and verify the setShowConfirm(true) state change occurs.
Constraint: Use vi.mock('@/hooks/use-auth') to avoid hitting the real API during UI tests.
cd frontend npm install -D vitest @testing-library/react @testing-library/jest-dom jsdomPlease add this test script to your package.json:
Context: We need to ensure that the UI doesn't break when we fix the user object types.
Primary Task: Create frontend/tests/components/NavBar.test.tsx.
Specific Test Cases:
Guest State: Assert that "Log In" and "Sign Up" buttons are visible when user is null.
Auth State: Mock the useAuth hook. Assert that "Hello, [Name]" appears and the "Log Out" button exists.
Interaction: Simulate a click on "Log Out" and verify the setShowConfirm(true) state change occurs.
Constraint: Use vi.mock('@/hooks/use-auth') to avoid hitting the real API during UI tests.