Jest React Preset Configuration

This challenge focuses on setting up Jest to effectively test React components written in TypeScript. You'll learn how to configure Jest with a preset that simplifies the setup for React testing, enabling you to write and run tests for your components with ease.

Problem Description

Your task is to configure Jest to work seamlessly with React and TypeScript projects. This involves using a popular Jest preset designed for React and ensuring it's properly set up to handle JSX syntax and TypeScript compilation during testing.

Key Requirements:

• Install Jest and relevant dependencies: You'll need to install Jest itself, along with packages that facilitate React and TypeScript testing.
• Configure jest.config.js: Create or modify a jest.config.js file to specify the chosen React preset and any necessary transformations.
• Enable TypeScript support: Ensure Jest can correctly process TypeScript files (.ts and .tsx).
• Handle JSX: The configuration should allow Jest to understand and compile JSX syntax used within your React components.
• Basic Test Execution: After configuration, you should be able to run a simple test file that imports and renders a basic React component.

Expected Behavior:

When you run Jest commands (e.g., npm test or yarn test), Jest should:

• Recognize and load the specified React preset.
• Successfully compile your TypeScript and JSX code.
• Execute your test files without errors related to syntax or environment setup.
• Report the test results accurately.

Edge Cases to Consider:

• Different project structures: How would your configuration adapt if your src directory is not at the root of your project?
• Global setup: For more complex scenarios, you might need a global setup file for Jest.

Examples

Example 1: Basic Component Test

Let's assume you have a simple React component:

src/components/Button.tsx

import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

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

export default Button;

And a basic test file:

src/components/Button.test.tsx

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

describe('Button', () => {
  it('renders the correct label', () => {
    render(<Button label="Click Me" onClick={() => {}} />);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button label="Test Button" onClick={handleClick} />);
    fireEvent.click(screen.getByText('Test Button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Expected Output (after running npm test or yarn test):

Jest should successfully find and run Button.test.tsx, and all tests should pass, indicating that the component renders correctly and the click handler is invoked. The output will be a summary of passing tests.

Constraints

• Your solution should be implemented using TypeScript.
• You must use a popular and well-maintained Jest preset for React testing (e.g., jest-preset-react).
• The configuration should be minimal and effective for standard React/TypeScript projects.
• Assume you are starting with a fresh package.json or have the ability to add new dependencies.

Notes

• The primary goal is to understand how to configure Jest with a preset, not to write complex tests for components.
• Consider the role of @babel/preset-react or @swc/jest in conjunction with your chosen Jest preset for handling JSX and modern JavaScript features.
• @testing-library/react is a common companion for React testing and will likely be useful in verifying your setup.