I’ve tested AI applications that handle streaming responses, complex state, and real-time interactions. Testing AI frontends is different from traditional web apps—you’re dealing with non-deterministic outputs, streaming data, and asynchronous operations. But with the right strategies, you can test AI applications with confidence.

In this guide, I’ll share the testing strategies I’ve learned from building production AI applications. You’ll learn how to test streaming responses, mock LLM APIs, test state management, and write effective integration tests.

Introduction: Why Testing AI Apps is Different

Traditional web applications have deterministic outputs. AI applications are different:

• Non-deterministic outputs: Same input can produce different outputs
• Streaming responses: Partial data arrives over time
• Complex state: Messages, context, metadata
• Async operations: Multiple concurrent requests
• Error handling: Network failures, rate limits, timeouts

I’ve seen AI applications fail in production because they weren’t tested properly. The right testing strategy catches bugs before deployment.

1. Testing Streaming Responses

1.1 Mocking EventSource

Test streaming responses by mocking EventSource:

// Mock EventSource
class MockEventSource {
  private listeners: { [key: string]: EventListener[] } = {};
  readyState = EventSource.CONNECTING;
  
  constructor(public url: string) {
    setTimeout(() => {
      this.readyState = EventSource.OPEN;
      this.emit('open', new Event('open'));
    }, 0);
  }
  
  addEventListener(event: string, listener: EventListener) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(listener);
  }
  
  emit(event: string, data: Event) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(listener => listener(data));
    }
  }
  
  close() {
    this.readyState = EventSource.CLOSED;
  }
  
  // Helper to simulate streaming
  simulateStream(chunks: string[]) {
    chunks.forEach((chunk, index) => {
      setTimeout(() => {
        const event = new MessageEvent('message', {
          data: JSON.stringify({
            id: 'test-id',
            delta: { content: chunk },
          }),
        });
        this.emit('message', event);
      }, index * 10);
    });
  }
}

// Test
describe('Streaming Chat', () => {
  it('should handle streaming responses', async () => {
    const mockSource = new MockEventSource('/api/chat/stream');
    global.EventSource = jest.fn(() => mockSource) as any;
    
    const { result } = renderHook(() => useStreamingChat());
    
    mockSource.simulateStream(['Hello', ' world', '!']);
    
    await waitFor(() => {
      expect(result.current.content).toBe('Hello world!');
    });
  });
});

1.2 Testing Stream State

Test streaming state transitions:

describe('Streaming State', () => {
  it('should transition through states correctly', async () => {
    const { result } = renderHook(() => useStreamingChat());
    
    // Initial state
    expect(result.current.isStreaming).toBe(false);
    expect(result.current.content).toBe('');
    
    // Start streaming
    act(() => {
      result.current.startStream();
    });
    expect(result.current.isStreaming).toBe(true);
    
    // Update stream
    act(() => {
      result.current.updateStream('Hello');
    });
    expect(result.current.content).toBe('Hello');
    
    // Complete stream
    act(() => {
      result.current.completeStream();
    });
    expect(result.current.isStreaming).toBe(false);
    expect(result.current.content).toBe('Hello');
  });
});

2. Mocking LLM APIs

2.1 Mock API Responses

Mock LLM API responses for consistent testing:

// Mock API client
const mockAIClient = {
  chat: jest.fn(),
  streamChat: jest.fn(),
};

// Mock responses
const mockChatResponse = {
  id: 'test-id',
  message: {
    id: 'msg-1',
    role: 'assistant',
    content: 'Hello, how can I help?',
    timestamp: new Date(),
  },
  finishReason: 'stop',
  usage: {
    promptTokens: 10,
    completionTokens: 5,
    totalTokens: 15,
  },
};

// Setup
beforeEach(() => {
  mockAIClient.chat.mockResolvedValue(mockChatResponse);
});

// Test
it('should send chat request and receive response', async () => {
  const response = await mockAIClient.chat({
    messages: [{ role: 'user', content: 'Hello' }],
  });
  
  expect(mockAIClient.chat).toHaveBeenCalledWith({
    messages: [{ role: 'user', content: 'Hello' }],
  });
  expect(response.message.content).toBe('Hello, how can I help?');
});

2.2 Mock Streaming Responses

Mock streaming responses with async generators:

async function* mockStreamingResponse() {
  const chunks = [
    { id: '1', delta: { content: 'Hello' } },
    { id: '2', delta: { content: ' world' } },
    { id: '3', delta: { content: '!' }, finishReason: 'stop' },
  ];
  
  for (const chunk of chunks) {
    yield chunk;
    await new Promise(resolve => setTimeout(resolve, 10));
  }
}

// Test
it('should handle streaming response', async () => {
  mockAIClient.streamChat.mockReturnValue(mockStreamingResponse());
  
  const chunks: any[] = [];
  for await (const chunk of mockAIClient.streamChat({})) {
    chunks.push(chunk);
  }
  
  expect(chunks).toHaveLength(3);
  expect(chunks[0].delta.content).toBe('Hello');
  expect(chunks[2].finishReason).toBe('stop');
});

3. Testing State Management

3.1 Testing Zustand Stores

Test Zustand stores in isolation:

import { renderHook, act } from '@testing-library/react';
import { useConversationStore } from './store';

describe('Conversation Store', () => {
  beforeEach(() => {
    // Reset store before each test
    useConversationStore.setState({
      messages: [],
      currentStream: null,
      isStreaming: false,
      error: null,
    });
  });
  
  it('should add message', () => {
    const { result } = renderHook(() => useConversationStore());
    
    act(() => {
      result.current.addMessage({
        id: '1',
        role: 'user',
        content: 'Hello',
        timestamp: new Date(),
      });
    });
    
    expect(result.current.messages).toHaveLength(1);
    expect(result.current.messages[0].content).toBe('Hello');
  });
  
  it('should update stream', () => {
    const { result } = renderHook(() => useConversationStore());
    
    act(() => {
      result.current.startStream();
      result.current.updateStream('Hello');
    });
    
    expect(result.current.isStreaming).toBe(true);
    expect(result.current.currentStream).toBe('Hello');
  });
});

3.2 Testing Selectors

Test selective subscriptions:

it('should only re-render when selected state changes', () => {
  const renderCount = jest.fn();
  
  const { result } = renderHook(() => {
    renderCount();
    return useConversationStore(state => state.messages);
  });
  
  // Update unrelated state
  act(() => {
    useConversationStore.setState({ error: new Error('test') });
  });
  
  // Should not re-render
  expect(renderCount).toHaveBeenCalledTimes(1);
  
  // Update selected state
  act(() => {
    useConversationStore.getState().addMessage({
      id: '1',
      role: 'user',
      content: 'Hello',
      timestamp: new Date(),
    });
  });
  
  // Should re-render
  expect(renderCount).toHaveBeenCalledTimes(2);
});

4. Integration Testing

4.1 Testing Chat Flow

Test the complete chat flow:

describe('Chat Integration', () => {
  it('should handle complete chat flow', async () => {
    const { getByPlaceholderText, getByText, findByText } = render(
      <ChatInterface />
    );
    
    // Type message
    const input = getByPlaceholderText('Type a message...');
    fireEvent.change(input, { target: { value: 'Hello' } });
    
    // Send message
    const sendButton = getByText('Send');
    fireEvent.click(sendButton);
    
    // User message should appear
    expect(getByText('Hello')).toBeInTheDocument();
    
    // Wait for AI response
    const response = await findByText(/Hello, how can I help/i);
    expect(response).toBeInTheDocument();
  });
});

4.2 Testing Error Handling

Test error scenarios:

it('should handle API errors gracefully', async () => {
  mockAIClient.chat.mockRejectedValue(new Error('API Error'));
  
  const { getByPlaceholderText, getByText, findByText } = render(
    <ChatInterface />
  );
  
  const input = getByPlaceholderText('Type a message...');
  fireEvent.change(input, { target: { value: 'Hello' } });
  fireEvent.click(getByText('Send'));
  
  // Error message should appear
  const errorMessage = await findByText(/Something went wrong/i);
  expect(errorMessage).toBeInTheDocument();
});

5. E2E Testing with Playwright

5.1 Basic E2E Test

Write E2E tests with Playwright:

import { test, expect } from '@playwright/test';

test('should complete chat flow', async ({ page }) => {
  await page.goto('http://localhost:3000');
  
  // Type and send message
  await page.fill('[placeholder="Type a message..."]', 'Hello');
  await page.click('button:has-text("Send")');
  
  // Wait for user message
  await expect(page.locator('text=Hello')).toBeVisible();
  
  // Wait for AI response
  await expect(page.locator('text=/Hello, how can I help/i')).toBeVisible({
    timeout: 10000,
  });
});

test('should handle streaming response', async ({ page }) => {
  await page.goto('http://localhost:3000');
  
  await page.fill('[placeholder="Type a message..."]', 'Hello');
  await page.click('button:has-text("Send")');
  
  // Check streaming indicator
  await expect(page.locator('[data-testid="streaming-indicator"]')).toBeVisible();
  
  // Wait for completion
  await expect(page.locator('[data-testid="streaming-indicator"]')).not.toBeVisible({
    timeout: 10000,
  });
});

5.2 Testing Network Conditions

Test with different network conditions:

test('should handle slow network', async ({ page, context }) => {
  // Simulate slow 3G
  await context.route('**/api/chat/**', async (route) => {
    await new Promise(resolve => setTimeout(resolve, 1000));
    await route.continue();
  });
  
  await page.goto('http://localhost:3000');
  await page.fill('[placeholder="Type a message..."]', 'Hello');
  await page.click('button:has-text("Send")');
  
  // Should show loading state
  await expect(page.locator('[data-testid="loading"]')).toBeVisible();
  
  // Should eventually show response
  await expect(page.locator('text=/Hello, how can I help/i')).toBeVisible({
    timeout: 15000,
  });
});

6. Performance Testing

6.1 Testing Render Performance

Test component render performance:

it('should render large message list efficiently', () => {
  const messages = Array.from({ length: 1000 }, (_, i) => ({
    id: `msg-${i}`,
    role: 'user',
    content: `Message ${i}`,
    timestamp: new Date(),
  }));
  
  const start = performance.now();
  const { container } = render(<MessageList messages={messages} />);
  const end = performance.now();
  
  // Should render in less than 100ms
  expect(end - start).toBeLessThan(100);
  
  // Should only render visible items
  const renderedItems = container.querySelectorAll('[data-testid="message"]');
  expect(renderedItems.length).toBeLessThan(50);
});

6.2 Testing Update Frequency

Test that updates are throttled correctly:

it('should throttle streaming updates', async () => {
  const updateCount = jest.fn();
  
  const { result } = renderHook(() => {
    const store = useConversationStore();
    updateCount();
    return store;
  });
  
  // Simulate 100 rapid updates
  for (let i = 0; i < 100; i++) {
    act(() => {
      result.current.updateStream(`chunk-${i}`);
    });
  }
  
  // Should be throttled to ~20 updates
  expect(updateCount).toHaveBeenCalledTimes(expect.any(Number));
  expect(updateCount.mock.calls.length).toBeLessThan(50);
});

7. Best Practices: Lessons from Production

After testing multiple AI applications, here are the practices I follow:

1. Mock at the right level: Mock APIs, not implementation details
2. Test streaming separately: Streaming needs dedicated tests
3. Test error scenarios: Errors happen—test them
4. Use integration tests: Test complete flows, not just units
5. Test state management: State is critical for AI apps
6. Test performance: AI apps need to be fast
7. Use E2E tests sparingly: They’re slow but catch real issues
8. Test edge cases: Empty responses, timeouts, network failures
9. Keep tests deterministic: Mock non-deterministic AI outputs
10. Test accessibility: AI apps should be accessible

8. Common Mistakes to Avoid

I’ve made these mistakes so you don’t have to:

• Not mocking APIs: Tests fail when APIs change
• Testing implementation details: Tests break on refactoring
• Not testing streaming: Streaming is complex—test it
• Ignoring error cases: Errors happen—test them
• Too many E2E tests: They’re slow—use sparingly
• Not testing state: State is critical for AI apps
• Testing non-deterministic outputs: Mock AI responses
• Not testing performance: AI apps need to be fast

9. Conclusion

Testing AI applications requires different strategies than traditional web apps. Mock APIs, test streaming separately, test error scenarios, and use integration tests for complete flows. The key is testing at the right level and keeping tests deterministic.

Get these right, and you’ll catch bugs before deployment, maintain confidence in your code, and ship reliable AI applications.