Modern React Testing with Vitest and React Testing Library

npm uninstall jest @types/jest ts-jest @testing-library/jest-dom
npm install -D vitest @vitest/ui @testing-library/react @testing-library/jest-dom jsdom @testing-library/user-event

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true, // Enables 'describe', 'it', 'expect' globally like Jest
    environment: 'jsdom', // Simulates a browser environment for React components
    setupFiles: './src/setupTests.ts', // Path to your setup file
    css: true, // Process CSS imports
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

// src/setupTests.ts
import '@testing-library/jest-dom/vitest';
import { cleanup } from '@testing-library/react';
import { afterEach, vi } from 'vitest';

// Automatically unmount and cleanup DOM after the test is finished.
afterEach(() => {
  cleanup();
});

// Mocking window.matchMedia if needed for UI libraries
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: vi.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: vi.fn(),
    removeListener: vi.fn(),
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  })),
});

jest.mock('axios', () => ({
  default: { get: jest.fn().mockResolvedValue({ data: {} }) }
}));

import { vi } from 'vitest';
import axios from 'axios';

vi.mock('axios', () => ({
  default: { get: vi.fn().mockResolvedValue({ data: {} }) }
}));

// src/components/UserProfile.tsx
import React, { useState, useEffect } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
}

export const UserProfile = ({ userId }: { userId: string }) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) throw new Error('Failed to fetch user');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Unknown error');
      } finally {
        setLoading(false);
      }
    };
    fetchUser();
  }, [userId]);

  if (loading) return <div role="status">Loading...</div>;
  if (error) return <div role="alert">{error}</div>;
  if (!user) return <div>No user found</div>;

  return (
    <article>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <button onClick={() => console.log('Edit clicked')}>Edit Profile</button>
    </article>
  );
};

// src/components/UserProfile.test.tsx
import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UserProfile } from './UserProfile';
import { vi, describe, it, expect, beforeEach } from 'vitest';

// Mock the global fetch
global.fetch = vi.fn();

describe('UserProfile Component', () => {
  const mockUser = { id: '1', name: 'Jane Doe', email: 'jane@example.com' };

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders loading state initially, then displays user data', async () => {
    (global.fetch as any).mockResolvedValueOnce({
      ok: true,
      json: async () => mockUser,
    });

    render(<UserProfile userId="1" />);

    // 1. Assert loading state
    expect(screen.getByRole('status')).toHaveTextContent('Loading...');

    // 2. Wait for loading to finish (Modern pattern instead of waitFor)
    await waitForElementToBeRemoved(() => screen.queryByRole('status'));

    // 3. Assert user data
    expect(screen.getByRole('heading', { name: 'Jane Doe' })).toBeInTheDocument();
    expect(screen.getByText('jane@example.com')).toBeInTheDocument();
  });

  it('renders error state on API failure', async () => {
    (global.fetch as any).mockResolvedValueOnce({
      ok: false,
    });

    render(<UserProfile userId="2" />);

    // Wait for the alert role to appear
    const alertElement = await screen.findByRole('alert');
    expect(alertElement).toHaveTextContent('Failed to fetch user');
  });

  it('simulates user interaction correctly', async () => {
    (global.fetch as any).mockResolvedValueOnce({
      ok: true,
      json: async () => mockUser,
    });
    const consoleSpy = vi.spyOn(console, 'log');

    render(<UserProfile userId="1" />);
    
    // Wait for data to load using findByRole
    const editButton = await screen.findByRole('button', { name: /edit profile/i });

    // Use userEvent instead of fireEvent for more realistic interactions
    const user = userEvent.setup();
    await user.click(editButton);

    expect(consoleSpy).toHaveBeenCalledWith('Edit clicked');
  });
});

npx vitest run --coverage