Testing React components

npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.js',
  },
});

import '@testing-library/jest-dom/vitest';

export default function ItemCard({ item, onAdd }) {
  return (
    <li>
      <h3>{item.name}</h3>
      <p>{`₹${item.price}`}</p>
      <button type="button" onClick={() => onAdd(item)}>
        Add {item.name}
      </button>
    </li>
  );
}

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import ItemCard from './ItemCard.jsx';

const espresso = { id: 'espresso', name: 'Espresso', price: 120 };

describe('ItemCard', () => {
  it('shows the name and price', () => {
    render(<ItemCard item={espresso} onAdd={() => {}} />);

    expect(screen.getByText('Espresso')).toBeInTheDocument();
    expect(screen.getByText('₹120')).toBeInTheDocument();
  });

  it('calls onAdd with the item when Add is clicked', async () => {
    const user = userEvent.setup();
    const onAdd = vi.fn();
    render(<ItemCard item={espresso} onAdd={onAdd} />);

    await user.click(screen.getByRole('button', { name: /add espresso/i }));

    expect(onAdd).toHaveBeenCalledTimes(1);
    expect(onAdd).toHaveBeenCalledWith(espresso);
  });
});

import { useState } from 'react';

export default function MenuSearch({ items }) {
  const [query, setQuery] = useState('');

  const visible = items.filter((i) =>
    i.name.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <div>
      <label htmlFor="search">Search</label>
      <input
        id="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      {visible.length === 0 && <p>No items found</p>}
      <ul>
        {visible.map((i) => (
          <li key={i.id}>{i.name}</li>
        ))}
      </ul>
    </div>
  );
}

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect } from 'vitest';
import MenuSearch from './MenuSearch.jsx';

const items = [
  { id: 'espresso', name: 'Espresso' },
  { id: 'masala-chai', name: 'Masala Chai' },
  { id: 'croissant', name: 'Butter Croissant' },
];

describe('MenuSearch', () => {
  it('shows every item at first', () => {
    render(<MenuSearch items={items} />);
    expect(screen.getAllByRole('listitem')).toHaveLength(3);
  });

  it('filters items as the user types', async () => {
    const user = userEvent.setup();
    render(<MenuSearch items={items} />);

    await user.type(screen.getByLabelText('Search'), 'chai');

    expect(screen.getByText('Masala Chai')).toBeInTheDocument();
    expect(screen.queryByText('Espresso')).not.toBeInTheDocument();
  });

  it('shows a message when nothing matches', async () => {
    const user = userEvent.setup();
    render(<MenuSearch items={items} />);

    await user.type(screen.getByLabelText('Search'), 'pizza');

    expect(screen.getByText('No items found')).toBeInTheDocument();
  });
});

import { useEffect, useState } from 'react';

export default function Menu() {
  const [items, setItems] = useState([]);
  const [status, setStatus] = useState('loading');

  useEffect(() => {
    async function load() {
      try {
        const res = await fetch('/menu');
        if (!res.ok) throw new Error('Request failed');
        setItems(await res.json());
        setStatus('ready');
      } catch {
        setStatus('error');
      }
    }
    load();
  }, []);

  if (status === 'loading') return <p>Loading menu...</p>;
  if (status === 'error') return <p>Could not load the menu.</p>;

  return (
    <ul>
      {items.map((i) => (
        <li key={i.id}>{i.name}</li>
      ))}
    </ul>
  );
}

import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi, afterEach } from 'vitest';
import Menu from './Menu.jsx';

afterEach(() => {
  vi.unstubAllGlobals();
});

describe('Menu', () => {
  it('shows items after loading', async () => {
    vi.stubGlobal(
      'fetch',
      vi.fn().mockResolvedValue({
        ok: true,
        json: async () => [
          { id: 'espresso', name: 'Espresso' },
          { id: 'cold-brew', name: 'Cold Brew' },
        ],
      })
    );

    render(<Menu />);

    // First the loading state is visible
    expect(screen.getByText('Loading menu...')).toBeInTheDocument();

    // findBy waits for the data to appear
    expect(await screen.findByText('Espresso')).toBeInTheDocument();
    expect(screen.getByText('Cold Brew')).toBeInTheDocument();
    expect(screen.queryByText('Loading menu...')).not.toBeInTheDocument();
  });

  it('shows an error message when the request fails', async () => {
    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: false }));

    render(<Menu />);

    expect(await screen.findByText('Could not load the menu.')).toBeInTheDocument();
  });
});

You are a senior React developer who uses Vitest and React Testing Library. Write tests for the component below. Rules: query by role, label or text (not by class names); use userEvent with await; cover the normal case, the empty case and one error case; mock fetch with vi.stubGlobal if the component fetches. After the code, list what each test protects against.

```
[paste your component]
```