👆 Simulating Events with Jest

Learn to simulate user interactions in tests.

Clicking Elements

import userEvent from '@testing-library/user-event';

test('increments on click', async () => {
  render(<Counter />);
  const button = screen.getByRole('button');
  await userEvent.click(button);
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

Typing Text

test('types in input', async () => {
  render(<SearchBox />);
  const input = screen.getByPlaceholderText('Search...');
  await userEvent.type(input, 'react');
  expect(input.value).toBe('react');
});

Form Submission

test('submits form', async () => {
  const handleSubmit = jest.fn();
  render(<LoginForm onSubmit={handleSubmit} />);
  
  await userEvent.type(
    screen.getByLabelText('Email'),
    'user@example.com'
  );
  await userEvent.type(
    screen.getByLabelText('Password'),
    'password'
  );
  await userEvent.click(screen.getByRole('button', { name: /submit/i }));
  
  expect(handleSubmit).toHaveBeenCalled();
});

Keyboard Input

test('handles Enter key', async () => {
  const handleSubmit = jest.fn();
  render(<SearchInput onSearch={handleSubmit} />);
  
  await userEvent.type(
    screen.getByPlaceholderText('Search...'),
    'react{Enter}'
  );
  
  expect(handleSubmit).toHaveBeenCalled();
});

✅ Key Takeaways

• Use **userEvent** for realistic interactions

• **await** all userEvent calls

• Use **jest.fn()** to track calls

• Test complete **workflows**

• Verify both **display** and **behavior**