How To Test React App With Jest and React Testing Library?

// src/components/Button.js

import React from 'react';

function Button({ label, onClick }) {
    return <button onClick={onClick}>{label}</button>;
}

export default Button;

// src/components/Button.test.js

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

test('renders button with correct label', () => {
    render(<Button label="Click Me" />);
    const buttonElement = screen.getByText(/click me/i);
    expect(buttonElement).toBeInTheDocument();
});

test('calls onClick handler when button is clicked', () => {
    const handleClick = jest.fn(); // Mock function
    render(<Button label="Click Me" onClick={handleClick} />);

    const buttonElement = screen.getByText(/click me/i);
    fireEvent.click(buttonElement);

    expect(handleClick).toHaveBeenCalledTimes(1);
});

// src/components/FetchButton.js

import React, { useState } from 'react';

function FetchButton({ fetchData }) {
    const [data, setData] = useState(null);

    const handleClick = async () => {
        const result = await fetchData();
        setData(result);
    };

    return (
        <div>
            <button onClick={handleClick}>Fetch Data</button>
            {data && <p>{data}</p>}
        </div>
    );
}

export default FetchButton;

// src/components/FetchButton.test.js

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

test('fetches and displays data when button is clicked', async () => {
    const mockFetchData = jest.fn().mockResolvedValue('Hello, World!');

    render(<FetchButton fetchData={mockFetchData} />);

    fireEvent.click(screen.getByText(/fetch data/i));

    const dataElement = await screen.findByText(/hello, world!/i);
    expect(dataElement).toBeInTheDocument();
    expect(mockFetchData).toHaveBeenCalledTimes(1);
});

// src/App.js

import React from 'react';
import Button from './components/Button';
import FetchButton from './components/FetchButton';
import './App.css';

function App() {
    // Mock fetchData function for FetchButton
    const mockFetchData = async () => {
        return "Hello, World!";
    };

    return (
        <div className="App">
            <header className="App-header">
                <h1>Testing React Components</h1>

                {/* Button Component */}
                <Button label="Click Me" onClick={() => alert("Button Clicked!")} />

                {/* FetchButton Component */}
                <FetchButton fetchData={mockFetchData} />
            </header>
        </div>
    );
}

export default App;

// src/App.test.js

import React from "react";
import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders the main heading", () => {
    render(<App />);
    const headingElement = screen.getByText(/Testing React Components/i);
    expect(headingElement).toBeInTheDocument();
});

test('renders the button with label "Click Me"', () => {
    render(<App />);
    const buttonElement = screen.getByText(/Click Me/i);
    expect(buttonElement).toBeInTheDocument();
});

test('renders the fetch button with label "Fetch Data"', () => {
    render(<App />);
    const fetchButtonElement = screen.getByText(/Fetch Data/i);
    expect(fetchButtonElement).toBeInTheDocument();
});