Jest Image Snapshot Testing

This challenge focuses on integrating image snapshot testing into your Jest test suite. Image snapshots are invaluable for verifying that your UI components render visually as expected, catching unintended visual regressions that traditional unit tests might miss. You will learn how to set up and use Jest's image snapshot functionality to ensure visual consistency.

Problem Description

Your task is to implement image snapshot testing for a given React component. This involves:

1. Setting up Jest for Image Snapshot Testing: Configure your Jest environment to support image snapshots. This typically involves installing and configuring a Jest preset or plugin.
2. Creating a Test for a React Component: Write a Jest test case that renders a simple React component and generates an image snapshot of its output.
3. Handling Snapshot Updates: Understand how to update existing snapshots when intentional visual changes are made to the component.

Key Requirements:

• Use Jest and its built-in snapshot capabilities, extended for image comparison.
• The solution must be written in TypeScript.
• The component to be snapshotted should be a basic functional React component.
• The test should successfully generate a .png snapshot.

Expected Behavior:

• When the test is run for the first time, a new snapshot image file should be created.
• Subsequent runs of the test should pass if the rendered component's visual output matches the existing snapshot.
• If the rendered component's visual output deviates from the snapshot, the test should fail, clearly indicating a visual regression.

Edge Cases to Consider:

• Initial Setup: Ensure the necessary dependencies are installed and configured correctly for image snapshotting.
• Rendering Complex Components: While this challenge uses a simple component, consider how dynamic content or different states might affect snapshots.

Examples

For this challenge, we'll assume you have a simple Button React component.

Example Component (Button.tsx):

import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary';
}

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled = false, variant = 'primary' }) => {
  const baseStyles = {
    padding: '10px 20px',
    borderRadius: '5px',
    cursor: 'pointer',
    border: 'none',
    fontSize: '16px',
  };

  const variantStyles = {
    primary: {
      backgroundColor: '#007bff',
      color: 'white',
    },
    secondary: {
      backgroundColor: '#6c757d',
      color: 'white',
    },
  };

  const disabledStyles = {
    opacity: 0.5,
    cursor: 'not-allowed',
  };

  const styles = {
    ...baseStyles,
    ...variantStyles[variant],
    ...(disabled ? disabledStyles : {}),
  };

  return (
    <button style={styles} onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
};

export default Button;

Example Test (Button.test.tsx):

import React from 'react';
import { render } from '@testing-library/react';
import Button from './Button';

describe('Button', () => {
  test('renders with primary variant', async () => {
    const onClick = jest.fn();
    const wrapper = render(<Button label="Click Me" onClick={onClick} />);

    // You will replace this comment with the actual image snapshot assertion
    // await expect(wrapper.container).toMatchImageSnapshot();
  });

  // Add more tests for different variants and states as needed
});

Expected Snapshot Output:

When the test renders with primary variant is run for the first time, a file named __snapshots__/Button.test.tsx.snap will be created (or a similar naming convention depending on your setup). Inside this file, you'll find a reference to an image file (e.g., Button__renders_with_primary_variant.png). This .png file will contain an image of the rendered Button component.

Constraints

• Your solution must use TypeScript.
• Jest must be used as the testing framework.
• You will need to install and configure a library like jest-image-snapshot to enable image snapshot capabilities.
• The component should be rendered in a browser-like environment (e.g., using JSDOM which is the default for Jest).
• The output snapshot should be in .png format.

Notes

• To get started, you'll likely need to install jest-image-snapshot and configure your Jest setup. This might involve modifying your jest.config.js or adding a Jest preset.
• Consider using @testing-library/react for rendering your React components in tests.
• The toMatchImageSnapshot() matcher provided by jest-image-snapshot will be your primary tool.
• When running tests for the first time or after making intentional visual changes, you'll use the --updateSnapshot (or -u) flag with Jest to update the snapshots.
• Be mindful of styling that might be dependent on external CSS files or global styles, as these can affect the rendered output and thus the snapshot. For this challenge, inline styles are used to simplify the example.