Integrate Percy Visual Regression Testing with Jest

This challenge focuses on setting up and configuring Percy, a visual regression testing platform, to work seamlessly with your Jest test suite. Successfully integrating Percy will enable you to automatically capture screenshots of your UI components during tests and detect unintended visual changes, ensuring a consistent user experience.

Problem Description

Your task is to integrate Percy into an existing Jest test suite written in TypeScript. This involves installing necessary dependencies, configuring Percy to connect with your Jest environment, and writing a test that leverages Percy's snapshotting capabilities. The goal is to have Percy automatically capture screenshots of your application's UI during your test runs and to demonstrate how to trigger visual regression checks.

Key Requirements:

• Install and configure the @percy/jest package.
• Ensure that Percy can correctly identify and capture snapshots of your UI components rendered within your Jest tests.
• Demonstrate a basic Jest test that uses Percy's snapshotting functionality.
• Understand how to run these tests and initiate a Percy build.

Expected Behavior:

When you run your Jest tests with the Percy integration active, Percy should:

• Capture screenshots of the UI elements or pages targeted by your tests.
• Upload these screenshots to your Percy project for visual comparison.

Edge Cases to Consider:

• Dynamic Content: How does Percy handle elements that change content or appearance frequently within a test? (While not strictly required to solve this challenge, understanding this is part of the broader Percy integration).
• Multiple Browser Snapshots: For a more robust setup, consider how Percy handles capturing snapshots across different browsers. (This is beyond the scope of the basic integration but is a good follow-up).

Examples

Example 1: Basic Component Snapshot

Input: Assume you have a simple React component rendered in a Jest test using @testing-library/react.

// src/components/Button.tsx
import React from 'react';

interface ButtonProps {
  label: string;
}

const Button: React.FC<ButtonProps> = ({ label }) => {
  return <button>{label}</button>;
};

export default Button;

// src/tests/Button.test.tsx
import React from 'react';
import { render } from '@testing-library/react';
import Button from '../components/Button';

describe('Button Component', () => {
  it('should render correctly and have a visual snapshot', async () => {
    const { container } = render(<Button label="Click Me" />);
    // Use Percy's snapshot function
    await Percy.snapshot('Button Component');
    expect(container).toBeInTheDocument();
  });
});

Output (Conceptual): When running npm test (or yarn test), a Percy build will be initiated. A new snapshot named "Button Component" will be uploaded to your Percy project, containing a screenshot of the rendered <button>Click Me</button> element.

Explanation: The test renders the Button component. Percy.snapshot('Button Component') tells Percy to capture a screenshot of the current DOM state and label it "Button Component" within the Percy build.

Example 2: Snapshotting a Page (Conceptual)

Input: Imagine a more complex test that renders an entire page.

// src/tests/HomePage.test.tsx
import React from 'react';
import { render } from '@testing-library/react';
import HomePage from '../pages/HomePage'; // Assume HomePage renders a complex UI

describe('Home Page', () => {
  it('should display the homepage layout correctly', async () => {
    render(<HomePage />);
    // Capture a snapshot of the entire rendered page
    await Percy.snapshot('Homepage Layout');
  });
});

Output (Conceptual): A Percy build is initiated. A snapshot named "Homepage Layout" is uploaded, capturing the entire rendered content of the HomePage.

Explanation: This test demonstrates snapshotting a larger UI structure, representing a typical page. Percy will capture a screenshot of whatever is currently rendered in the test environment.

Constraints

• The solution must be in TypeScript.
• You are expected to use npm or yarn for package management.
• A Percy project must be created in your Percy account (or a dummy project if you're just setting it up locally for demonstration). You will need a Percy token.
• The provided Jest tests should be runnable and interact with Percy.

Notes

• You will need to install @percy/jest and potentially @percy/cli (though @percy/jest often handles the build initiation).
• To run Percy, you'll typically set an environment variable for your Percy Token (e.g., PERCY_TOKEN).
• Consider how you will structure your Percy snapshots (e.g., by component, by page, by feature).
• This challenge focuses on the integration and basic usage. Advanced Percy features like responsive testing or element-specific snapshots are beyond the scope but good next steps.