Integration Testing

// Testing component integration
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const renderWithRouter = (component) => {
    return render(
        <BrowserRouter>
            {component}
        </BrowserRouter>
    );
};

test('complete user flow', async () => {
    renderWithRouter(<App />);
    
    // Navigate to login
    fireEvent.click(screen.getByText('Login'));
    
    // Fill login form
    fireEvent.change(screen.getByLabelText(/email/i), {
        target: { value: 'test@example.com' }
    });
    fireEvent.change(screen.getByLabelText(/password/i), {
        target: { value: 'password123' }
    });
    
    // Submit form
    fireEvent.click(screen.getByRole('button', { name: /login/i }));
    
    // Verify navigation to dashboard
    await waitFor(() => {
        expect(screen.getByText('Dashboard')).toBeInTheDocument();
    });
});

// Testing API integration
import { render, screen, waitFor } from '@testing-library/react';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import UserList from './UserList';

const server = setupServer(
    rest.get('/api/users', (req, res, ctx) => {
        return res(ctx.json([
            { id: 1, name: 'John Doe' },
            { id: 2, name: 'Jane Smith' }
        ]));
    })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('fetches and displays users', async () => {
    render(<UserList />);
    
    await waitFor(() => {
        expect(screen.getByText('John Doe')).toBeInTheDocument();
        expect(screen.getByText('Jane Smith')).toBeInTheDocument();
    });
});

// MSW setup for API mocking
import { rest } from 'msw';
import { setupServer } from 'msw/node';

const handlers = [
    rest.get('/api/users', (req, res, ctx) => {
        return res(ctx.json({ users: [] }));
    }),
    rest.post('/api/users', (req, res, ctx) => {
        return res(ctx.json({ id: 1, ...req.body }));
    })
];

export const server = setupServer(...handlers);

// Testing error handling
test('handles API errors gracefully', async () => {
    server.use(
        rest.get('/api/users', (req, res, ctx) => {
            return res(ctx.status(500), ctx.json({ error: 'Server error' }));
        })
    );
    
    render(<UserList />);
    
    await waitFor(() => {
        expect(screen.getByText('Error loading users')).toBeInTheDocument();
    });
});

// Complete integration test suite
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import App from './App';

const server = setupServer(
    rest.get('/api/users', (req, res, ctx) => {
        return res(ctx.json([
            { id: 1, name: 'John Doe', email: 'john@example.com' }
        ]));
    }),
    rest.post('/api/users', (req, res, ctx) => {
        return res(ctx.json({ id: 2, ...req.body }));
    })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

const renderApp = () => {
    const queryClient = new QueryClient({
        defaultOptions: {
            queries: { retry: false },
            mutations: { retry: false }
        }
    });
    
    return render(
        <QueryClientProvider client={queryClient}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </QueryClientProvider>
    );
};

describe('App Integration Tests', () => {
    test('complete user management flow', async () => {
        const user = userEvent.setup();
        renderApp();
        
        // Navigate to users page
        await user.click(screen.getByText('Users'));
        
        // Wait for users to load
        await waitFor(() => {
            expect(screen.getByText('John Doe')).toBeInTheDocument();
        });
        
        // Add new user
        await user.click(screen.getByRole('button', { name: /add user/i }));
        
        await user.type(screen.getByLabelText(/name/i), 'Jane Smith');
        await user.type(screen.getByLabelText(/email/i), 'jane@example.com');
        await user.click(screen.getByRole('button', { name: /save/i }));
        
        // Verify new user appears
        await waitFor(() => {
            expect(screen.getByText('Jane Smith')).toBeInTheDocument();
        });
    });
});