User Profile Component Testing

Build a user profile component and implement comprehensive snapshot testing to ensure UI consistency across changes.

Requirements

Create a UserProfile component that displays user information in a formatted card layout. The component should accept user data as props and render it appropriately. Implement snapshot tests to verify the component's rendered output remains consistent.

Component Requirements

The UserProfile component should:

• Accept a user object with properties: name, email, role, and bio
• Display the user's name as a heading
• Show email and role as labeled fields
• Display the bio in a paragraph if provided
• Handle missing or undefined bio gracefully (don't render bio section if not provided)

Testing Requirements

Create comprehensive snapshot tests that verify:

• The component renders correctly with complete user data
• The component handles missing bio field appropriately
• The rendered output structure remains consistent

Implementation

@generates

Tests

• Renders a complete user profile with all fields and matches the snapshot @test
• Renders a user profile without bio field and matches the snapshot @test

API

/**
 * Displays a user profile card with formatted information
 * @param {Object} props - Component props
 * @param {Object} props.user - User data object
 * @param {string} props.user.name - User's full name
 * @param {string} props.user.email - User's email address
 * @param {string} props.user.role - User's role or title
 * @param {string} [props.user.bio] - Optional user biography
 * @returns {JSX.Element} Rendered user profile component
 */
function UserProfile({ user }) {
  // Implementation here
}

export default UserProfile;

Dependencies { .dependencies }

react { .dependency }

Provides the component framework for building the UI.

@testing-library/react { .dependency }

Provides testing utilities for React components including snapshot testing capabilities.