Testing Vue Component Props with Vitest

This challenge focuses on ensuring your Vue components correctly handle and display data passed through props. Writing comprehensive prop tests is crucial for building robust and predictable user interfaces. You will learn how to use Vitest to simulate different prop values and assert that your component renders as expected.

Problem Description

You are tasked with creating a suite of tests for a simple Vue 3 component called UserProfileCard. This component receives several props related to a user's profile and should display this information accordingly. Your goal is to write unit tests that cover various scenarios of prop values, including valid data, missing optional props, and potentially invalid data types (though for this exercise, we'll focus on valid and optional).

Key Requirements:

1. Component Setup: You will be provided with a basic UserProfileCard.vue component.
2. Testing Framework: Use Vitest as your testing framework.
3. Mounting Components: Use @vue/test-utils's mount function to render your UserProfileCard component within the test environment.
4. Prop Testing: Write tests to verify how the component renders with different prop combinations.
5. Assertions: Use Vitest's assertion library to check for the presence of specific text content within the rendered component's HTML.

Expected Behavior:

• The UserProfileCard component should display the user's name, email, and bio.
• If an optional prop (like bio) is not provided, the component should gracefully handle its absence (e.g., not render a bio section or display a placeholder).

Examples

Example 1: Basic User Information

Input: UserProfileCard component rendered with props: { name: 'Alice Smith', email: 'alice.smith@example.com' }

Output: The rendered HTML should contain:

• "Alice Smith"
• "alice.smith@example.com"

Explanation: This test ensures that the essential name and email props are correctly displayed.

Example 2: User with Optional Bio

Input: UserProfileCard component rendered with props: { name: 'Bob Johnson', email: 'bob.j@example.com', bio: 'Passionate developer and avid cyclist.' }

Output: The rendered HTML should contain:

• "Bob Johnson"
• "bob.j@example.com"
• "Passionate developer and avid cyclist."

Explanation: This test verifies that the bio prop, when provided, is also rendered correctly alongside the other user details.

Example 3: User Without Optional Bio

Input: UserProfileCard component rendered with props: { name: 'Charlie Brown', email: 'charlie.b@example.com' }

Output: The rendered HTML should contain:

• "Charlie Brown"
• "charlie.b@example.com"
• The HTML should not contain any elements specifically displaying a bio. (e.g., no paragraph with "Passionate developer...")

Explanation: This test checks that the component doesn't break or display unexpected content when the optional bio prop is missing.

Constraints

• All tests must be written in TypeScript.
• You must use Vitest for running tests.
• You must use @vue/test-utils for mounting Vue components.
• The provided UserProfileCard.vue component will have the following prop definitions:

  interface Props {
    name: string;
    email: string;
    bio?: string; // Optional bio
  }
  

• Focus on testing the display of text content within the component's template.

Notes

• Familiarize yourself with Vitest's describe, it (or test), and expect syntax.
• Consult the @vue/test-utils documentation for the mount function and how to pass props.
• Consider how to select elements within the mounted component for your assertions (e.g., using find or text methods).
• The goal is to confirm that the props are influencing the DOM as expected, not to test the internal logic of the component itself (if any were present).