Testing React Components with Percy: A Jest Integration Challenge

Percy is a visual testing tool that helps you catch UI regressions. This challenge focuses on integrating Percy into a Jest testing environment for a React component, ensuring that your visual changes are properly captured and reviewed. Successfully completing this challenge will allow you to automatically detect and address visual discrepancies in your application.

Problem Description

You are tasked with setting up Percy integration within a Jest testing suite for a simple React component. The component, MyComponent, displays a greeting message that changes based on a prop. You need to write Jest tests that not only assert the component renders correctly but also trigger Percy to capture snapshots of the component's visual output for each test case. The goal is to ensure that Percy is correctly initialized, snapshots are taken, and the tests pass without errors.

Key Requirements:

• Install the necessary Percy packages (@percy/cli, @percy/react).
• Configure Percy to work with your Jest tests.
• Write at least two Jest tests for MyComponent that trigger Percy snapshot captures.
• Ensure the tests pass and that Percy successfully captures the snapshots.
• Handle potential errors during Percy initialization gracefully.

Expected Behavior:

• When running the Jest tests, Percy should initialize and start capturing snapshots.
• The snapshots should be uploaded to Percy for review.
• The Jest tests should pass without errors related to Percy integration.
• If Percy initialization fails (e.g., due to invalid API keys), the tests should fail with a clear error message.

Edge Cases to Consider:

• Percy API key is missing or invalid.
• Percy is not properly initialized before snapshotting.
• The component renders differently based on props, requiring multiple snapshots.

Examples

Example 1:

Input: MyComponent with prop 'name' set to "Alice"
Output: "Hello, Alice!"
Explanation: The component renders the greeting message with the provided name. Percy should capture a snapshot of this rendering.

Example 2:

Input: MyComponent with prop 'name' set to "Bob"
Output: "Hello, Bob!"
Explanation: The component renders the greeting message with the provided name. Percy should capture a snapshot of this rendering, which will be compared to previous snapshots.

Constraints

• You must use Jest as the testing framework.
• You must use TypeScript.
• The React component MyComponent is provided (see code below).
• You should aim for a clean and maintainable integration.
• Percy API key should be configured as an environment variable (PERCY_API_KEY).

Notes

• You'll need a Percy account and a valid API key to complete this challenge.
• Consider using beforeAll or beforeEach hooks to initialize Percy.
• Ensure that your Percy project is properly configured in the Percy dashboard.
• The provided MyComponent is a simple example; the principles apply to more complex components.
• Refer to the Percy documentation for detailed instructions on integration: https://www.percy.io/docs/

// MyComponent.tsx
import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default MyComponent;