Why is fireEvent considered legacy and potentially hazardous compared to userEvent?

fireEvent invokes dispatchEvent with a single isolated synthetic event. It fails to emulate precursor pointer events (pointerdown, mousedown), does not shift focus (leaving document.activeElement unchanged), ignores interaction rules (e.g., clicking disabled elements), and omits concurrent blur/change events. This allows critical validation and keyboard accessibility bugs to slip into production unnoticed.

Why was the mandatory userEvent.setup() method introduced in user-event v14?

userEvent.setup() initializes a persistent input device driver instance (Virtual Input Session). It retains state across operations: current pointer coordinates, caret position within text fields, active focused element, and held modifier keys (Shift, Ctrl, Alt). In v13, methods were static and recreated context on every call, leading to lost state.

How do you verify interface accessibility for keyboard-only users?

Using user.tab() and user.keyboard(). Tests simulate navigation across interactive page elements using user.tab() and assert expect(element).toHaveFocus(). Menus are opened and options selected via user.keyboard('{Enter}'), '{Space}', '{ArrowDown}', '{Escape}', demonstrating complete operability without mouse reliance.

How does userEvent behave when attempting to click an element with disabled attribute or pointer-events: none style?

userEvent strictly adheres to browser specifications: if the target element or any ancestor is disabled or styled with pointer-events: none, userEvent aborts the event chain. Click, focus, and change events will not be dispatched to React handlers, preventing invalid tests from passing.

What occurs under the hood in the DOM when calling user.type(input, 'Hi')?

For each character, an event sequence is generated: 1) input.focus() (if not already focused, firing focusin/focus and blur on the previous element); 2) keydown ('H'); 3) keypress ('H'); 4) textInput / beforeinput; 5) input value update; 6) input; 7) keyup ('H'). The entire pipeline is subsequently repeated for character 'i'.

How do you integrate userEvent with fake timers in Vitest?

Because userEvent uses native delays (setTimeout) to emulate time intervals between keystrokes, enabling vi.useFakeTimers() freezes userEvent promises. To resolve this, pass { advanceTimers: vi.advanceTimersByTime } into userEvent.setup(), tying the library's internal timers to Vitest's virtual clock.

What is the difference between user.keyboard('{Enter}') and user.keyboard('[Enter]') in user-event syntax?

Curly brackets {Enter} denote a complete keypress cycle: pressing down and immediately releasing up. Square brackets with modifiers, like [Enter>], represent pressing the key down (keydown) without releasing it, allowing developers to model held keys (e.g., [ShiftLeft>] for uppercase typing) followed by an explicit release [/ShiftLeft].

How do you test pasting clipboard data with data type validation?

Using user.paste(text). The target element is focused beforehand, and user.paste dispatches a paste event with a DataTransfer object carrying 'text/plain' content. This allows validating onPaste handlers, content sanitization, and input masking in components.

Emulating User Actions with user-event v14+ — Testing & QA Automation

Architectural Foundation#

In a browser environment, physical user interaction with an interface is never reduced to an isolated event. When a user clicks a button, presses a key, or pastes text from the clipboard, the browser initiates a complex DOM lifecycle event cascade (Event Dispatch Pipeline), encompassing capture phases, bubbling phases, focus transitions, and active element updates (document.activeElement).

The historical fireEvent utility from @testing-library/dom was merely a thin wrapper over the native node.dispatchEvent(new Event(type)) method. Calling fireEvent.click(button) dispatches only a synthetic click event to the node. In doing so, the browser engine:

Does not generate precursor pointer events (pointerdown, mousedown).
Does not verify element visibility, accessibility, or pointer-events: none.
Does not shift focus to the element and does not trigger associated focusin, focus, blur, focusout events.
Does not emulate physical keyboard key presses when clicking via Space or Enter.

Consequently, tests using fireEvent created a false sense of security: a form with validation logic triggered on onBlur would pass tests, but crash completely in production for real users because fireEvent.change never shifted focus.

@testing-library/user-event version 14+ fundamentally resolves this problem. It models a virtual browser stack: managing a virtual pointer (mouse, touchscreen), a virtual keyboard, the clipboard, and synchronizing DOM state in strict adherence to W3C UI Events specifications.

Mental Model#

In user-event v14+, interaction revolves around a session instance created via userEvent.setup(). This call initializes the internal state of the virtual input device driver: current cursor position, focus, pressed modifier keys (Shift, Alt, Control, Meta), and active pointer captures.

text

+-----------------------------------------------------------------------+
|                    userEvent.click(submitButton)                      |
+-----------------------------------------------------------------------+
                                    │
                                    ▼ (1. Pointer hover)
+-----------------------------------------------------------------------+
|  pointerover -> mouseover -> pointerenter -> mouseenter               |
+-----------------------------------------------------------------------+
                                    │
                                    ▼ (2. Mouse button press)
+-----------------------------------------------------------------------+
|  pointerdown -> mousedown                                             |
+-----------------------------------------------------------------------+
                                    │
                                    ▼ (3. Focus transition)
+-----------------------------------------------------------------------+
|  Previous element: blur -> focusout                                   |
|  New element:      focusin -> focus                                   |
|  Update:           document.activeElement = submitButton              |
+-----------------------------------------------------------------------+
                                    │
                                    ▼ (4. Release & action trigger)
+-----------------------------------------------------------------------+
|  pointerup -> mouseup -> click                                        |
+-----------------------------------------------------------------------+

Architectural Comparison: `fireEvent` vs `userEvent`#

Syntax and API#

1. Initialization via `userEvent.setup()`#

All interactions must begin with a call to userEvent.setup(). Instance creation should take place prior to mounting the component in render():

typescript

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

it('demonstrates basic userEvent initialization', async () => {
  // Configure user session with optional settings
  const user = userEvent.setup({
    delay: null, // Disable artificial delays for maximum test execution speed
  });

  render(<SearchInput />);
  const input = screen.getByRole('textbox', { name: /search/i });

  // All methods of the user instance are asynchronous
  await user.type(input, 'Next.js 15');
});

2. Key `UserEvent` Instance Methods#

user.click(element): Full click lifecycle (pointerdown, focus, mousedown, pointerup, mouseup, click).
user.dblClick(element) / user.tripleClick(element): Double and triple click with text selection.
user.type(element, text, options): Sequential character typing emitting keyboard events for each character.
user.clear(element): Clears a text input or textarea by selecting contents and dispatching Backspace.
user.tab(options): Advances focus via Tab respecting tabIndex (options.shift: true for reverse navigation).
user.keyboard(text): Low-level key press emulation: user.keyboard('{Enter}'), user.keyboard('{Escape}'), user.keyboard('[ShiftLeft>]a[/ShiftLeft]').
user.upload(input, file): Uploads files to <input type="file">.
user.selectOptions(element, values) / user.deselectOptions(element, values): Selects options in <select>.
user.paste(text): Pastes text from clipboard into current active element dispatching clipboardData.

Practical Patterns#

Pattern 1: Complex Form with `onBlur` Validation and Submission#

Real-world forms validate field correctness upon loss of focus (onBlur), format input on the fly, and submit data when Enter is pressed. fireEvent cannot properly test this flow, whereas userEvent faithfully reproduces it.

typescriptsrc/components/RegistrationForm.test.tsx

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

interface RegistrationData {
  readonly email: string;
  readonly username: string;
}

interface RegistrationFormProps {
  readonly onSubmit: (data: RegistrationData) => void;
}

function RegistrationForm({ onSubmit }: RegistrationFormProps) {
  const [email, setEmail] = useState('');
  const [username, setUsername] = useState('');
  const [emailError, setEmailError] = useState<string | null>(null);

  const handleEmailBlur = () => {
    if (!email.includes('@')) {
      setEmailError('Please enter a valid email address');
    } else {
      setEmailError(null);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!emailError && email && username) {
      onSubmit({ email, username });
    }
  };

  return (
    <form onSubmit={handleSubmit} aria-label="Registration form">
      <div>
        <label htmlFor="reg-email">Email</label>
        <input
          id="reg-email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          onBlur={handleEmailBlur}
          aria-invalid={Boolean(emailError)}
          aria-describedby={emailError ? 'email-err' : undefined}
        />
        {emailError && (
          <span id="email-err" role="alert">
            {emailError}
          </span>
        )}
      </div>

      <div>
        <label htmlFor="reg-username">Username</label>
        <input
          id="reg-username"
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>

      <button type="submit">Register</button>
    </form>
  );
}

describe('RegistrationForm with userEvent', () => {
  it('validates blur on tab navigation and handles form submission', async () => {
    const user = userEvent.setup();
    const handleSubmit = vi.fn();

    render(<RegistrationForm onSubmit={handleSubmit} />);

    const emailInput = screen.getByRole('textbox', { name: /email/i });
    const usernameInput = screen.getByRole('textbox', { name: /username/i });
    const submitBtn = screen.getByRole('button', { name: /register/i });

    // 1. Enter invalid email
    await user.type(emailInput, 'invalid-email');

    // 2. Pressing Tab moves focus to the next field (triggers onBlur on email)
    await user.tab();

    expect(usernameInput).toHaveFocus();

    // 3. Validation triggered on onBlur
    expect(
      screen.getByRole('alert')
    ).toHaveTextContent('Please enter a valid email address');
    expect(emailInput).toBeInvalid();

    // 4. Return back via Shift+Tab, clear and type valid address
    await user.tab({ shift: true });
    expect(emailInput).toHaveFocus();

    await user.clear(emailInput);
    await user.type(emailInput, '[email protected]');

    // 5. Navigate to username and fill data
    await user.tab();
    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
    expect(emailInput).toBeValid();

    await user.type(usernameInput, 'alex_lead');

    // 6. Submit form by pressing Enter directly from the input field
    await user.keyboard('{Enter}');

    expect(handleSubmit).toHaveBeenCalledTimes(1);
    expect(handleSubmit).toHaveBeenCalledWith({
      email: '[email protected]',
      username: 'alex_lead',
    });
  });
});

Under the WAI-ARIA specification, an accessible modal dialog must constrain keyboard focus inside itself when Tab is pressed and dismiss upon pressing Escape.

typescriptsrc/components/AccessibleModal.test.tsx

import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React, { useEffect, useRef } from 'react';

interface ModalProps {
  readonly isOpen: boolean;
  readonly onClose: () => void;
  readonly title: string;
}

function AccessibleModal({ isOpen, onClose, title }: ModalProps) {
  const modalRef = useRef<HTMLDivElement>(null);
  const firstButtonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (!isOpen) return;

    // Focus first interactive element upon opening
    firstButtonRef.current?.focus();

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
        return;
      }

      if (e.key === 'Tab' && modalRef.current) {
        const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(
          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
        );
        const firstElement = focusableElements[0];
        const lastElement = focusableElements[focusableElements.length - 1];

        if (e.shiftKey) {
          if (document.activeElement === firstElement) {
            e.preventDefault();
            lastElement?.focus();
          }
        } else {
          if (document.activeElement === lastElement) {
            e.preventDefault();
            firstElement?.focus();
          }
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      ref={modalRef}
    >
      <h2 id="modal-title">{title}</h2>
      <button ref={firstButtonRef} type="button">
        Action 1
      </button>
      <button type="button">
        Action 2
      </button>
      <button type="button" onClick={onClose} aria-label="Close dialog">
        Cancel
      </button>
    </div>
  );
}

describe('AccessibleModal Keyboard Navigation', () => {
  it('constrains focus inside modal (Focus Trap) and closes on Escape', async () => {
    const user = userEvent.setup();
    const handleClose = vi.fn();

    render(
      <div>
        <button type="button">External page button</button>
        <AccessibleModal
          isOpen={true}
          onClose={handleClose}
          title="Confirm Action"
        />
      </div>
    );

    const action1Btn = screen.getByRole('button', { name: 'Action 1' });
    const action2Btn = screen.getByRole('button', { name: 'Action 2' });
    const cancelBtn = screen.getByRole('button', { name: 'Close dialog' });

    // 1. Upon opening, focus automatically targets the first button
    expect(action1Btn).toHaveFocus();

    // 2. Tab forward navigation
    await user.tab();
    expect(action2Btn).toHaveFocus();

    await user.tab();
    expect(cancelBtn).toHaveFocus();

    // 3. Tab from last element wraps focus back to the first element
    await user.tab();
    expect(action1Btn).toHaveFocus();

    // 4. Shift+Tab from first element wraps to the last element
    await user.tab({ shift: true });
    expect(cancelBtn).toHaveFocus();

    // 5. Close modal dialog with Escape key
    await user.keyboard('{Escape}');
    expect(handleClose).toHaveBeenCalledTimes(1);
  });
});

Dropdown selection widgets require navigation via arrow keys (ArrowDown, ArrowUp), selection with Enter, and closure with Escape.

typescriptsrc/components/CustomSelect.test.tsx

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

interface Option {
  readonly id: string;
  readonly label: string;
}

interface CustomSelectProps {
  readonly options: readonly Option[];
  readonly onSelect: (option: Option) => void;
}

function CustomSelect({ options, onSelect }: CustomSelectProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [highlightedIndex, setHighlightedIndex] = useState(0);

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (!isOpen) {
      if (e.key === 'ArrowDown' || e.key === 'Enter') {
        e.preventDefault();
        setIsOpen(true);
      }
      return;
    }

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setHighlightedIndex((prev) => (prev + 1) % options.length);
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setHighlightedIndex((prev) => (prev - 1 + options.length) % options.length);
    } else if (e.key === 'Enter') {
      e.preventDefault();
      const selected = options[highlightedIndex];
      if (selected) {
        onSelect(selected);
        setIsOpen(false);
      }
    } else if (e.key === 'Escape') {
      e.preventDefault();
      setIsOpen(false);
    }
  };

  return (
    <div>
      <button
        type="button"
        aria-haspopup="listbox"
        aria-expanded={isOpen}
        onClick={() => setIsOpen((prev) => !prev)}
        onKeyDown={handleKeyDown}
      >
        Select Framework
      </button>

      {isOpen && (
        <ul role="listbox" tabIndex={-1}>
          {options.map((opt, idx) => (
            <li
              key={opt.id}
              role="option"
              aria-selected={idx === highlightedIndex}
            >
              {opt.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

describe('CustomSelect Arrow Keys Navigation', () => {
  const options: readonly Option[] = [
    { id: 'react', label: 'React 19' },
    { id: 'next', label: 'Next.js 15' },
    { id: 'vitest', label: 'Vitest 4' },
  ];

  it('enables option selection via arrow keys and Enter', async () => {
    const user = userEvent.setup();
    const handleSelect = vi.fn();

    render(<CustomSelect options={options} onSelect={handleSelect} />);

    const trigger = screen.getByRole('button', { name: 'Select Framework' });
    trigger.focus();

    // 1. Open dropdown with ArrowDown
    await user.keyboard('{ArrowDown}');
    expect(screen.getByRole('listbox')).toBeInTheDocument();

    const optionElements = screen.getAllByRole('option');
    expect(optionElements[0]).toHaveAttribute('aria-selected', 'true');

    // 2. Move highlight down
    await user.keyboard('{ArrowDown}');
    expect(optionElements[1]).toHaveAttribute('aria-selected', 'true');

    // 3. Select option with Enter
    await user.keyboard('{Enter}');

    expect(handleSelect).toHaveBeenCalledWith({ id: 'next', label: 'Next.js 15' });
    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
  });
});

Pattern 4: File Uploads via `user.upload()`#

Verifying file uploads necessitates accurate generation of the FileList object and dispatching the change event along with file metadata.

typescriptsrc/components/AvatarUploader.test.tsx

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

interface FileUploadProps {
  readonly onUpload: (file: File) => void;
}

function AvatarUploader({ onUpload }: FileUploadProps) {
  const [fileName, setFileName] = useState<string | null>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setFileName(file.name);
      onUpload(file);
    }
  };

  return (
    <div>
      <label htmlFor="avatar-file">Upload Avatar</label>
      <input
        id="avatar-file"
        type="file"
        accept="image/png, image/jpeg"
        onChange={handleChange}
      />
      {fileName && <p>Selected file: {fileName}</p>}
    </div>
  );
}

describe('AvatarUploader', () => {
  it('handles file upload correctly via user.upload()', async () => {
    const user = userEvent.setup();
    const handleUpload = vi.fn();

    render(<AvatarUploader onUpload={handleUpload} />);

    const input = screen.getByLabelText(/upload avatar/i) as HTMLInputElement;

    const file = new File(['avatar-raw-bytes'], 'avatar.png', {
      type: 'image/png',
    });

    await user.upload(input, file);

    expect(input.files?.[0]).toBe(file);
    expect(input.files?.item(0)?.name).toBe('avatar.png');
    expect(handleUpload).toHaveBeenCalledTimes(1);
    expect(screen.getByText('Selected file: avatar.png')).toBeInTheDocument();
  });
});

Common Pitfalls#

Ошибка: Calling userEvent directly without initializing userEvent.setup()

Calling userEvent.click() directly (v13 legacy syntax) recreates a temporary internal driver context on every call. This drops modifier key states, virtual focus, and caret position.

typescript

// ❌ ANTIPATTERN (v13): Focus and driver state are lost across calls
await userEvent.click(button);

// ✅ SOLUTION (v14+): Shared session instance for the entire test
const user = userEvent.setup();
await user.click(button);

Ошибка: Omitting the await keyword before userEvent operations

All userEvent methods return promises because they schedule asynchronous microtasks and physical browser delays. Omitting await causes expect assertions to execute before the event finishes processing in React.

typescript

// ❌ ANTIPATTERN: Event will not finish processing before assert
user.type(input, 'test');
expect(input).toHaveValue('test'); // Fails!

// ✅ SOLUTION: Mandatory await on each step
await user.type(input, 'test');
expect(input).toHaveValue('test');

Ошибка: Using fireEvent.change instead of user.type for input validation

fireEvent.change(input, { target: { value: 'abc' } }) bluntly overwrites the value property in a single stroke. It does not dispatch keydown, keypress, keyup events or emulate character-by-character input, causing input masks (e.g., phone numbers) and keystroke validations to fail silently.

typescript

// ❌ ANTIPATTERN: Input mask will not react to atomic keystrokes
fireEvent.change(phoneInput, { target: { value: '15551234567' } });

// ✅ SOLUTION: Character-by-character input with real keyboard events
await user.type(phoneInput, '15551234567');

Ошибка: userEvent conflict with fake timers (vi.useFakeTimers)

When fake timers are enabled (vi.useFakeTimers()), userEvent methods can hang because they use real timers to emulate typing delays. You must pass a timer advancement function into setup().

typescript

// ❌ ANTIPATTERN: Test hangs with a timeout error
vi.useFakeTimers();
const user = userEvent.setup();

// ✅ SOLUTION: Link userEvent to Vitest fake timers
vi.useFakeTimers();
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });

Lifecycle of Interaction Emulation with userEvent

Session InitializationSetup

Invoke userEvent.setup() prior to render(), configuring timer advancement and pointer parameters.

Component MountingRender

Render the tree into virtual DOM with render() and locate the target node using an ARIA role query.

Asynchronous Action ExecutionDispatch

Invoke user.click, user.type, or user.keyboard with mandatory await.

Cascading Event DispatchPipeline

user-event dispatches pointerover -> focus -> keydown -> input -> change -> blur.

Final Contract AssertionAssertion

Synchronously or asynchronously assert DOM updates using jest-dom matchers.

Interview Questions#

Interview Questions8 questions

Emulating User Actions with user-event v14+

Architectural Foundation#

Mental Model#

Architectural Comparison: `fireEvent` vs `userEvent`#

Syntax and API#

1. Initialization via `userEvent.setup()`#

2. Key `UserEvent` Instance Methods#

Practical Patterns#

Pattern 1: Complex Form with `onBlur` Validation and Submission#

Pattern 3: Testing Arrow Key Navigation in Listbox / Combobox#

Pattern 4: File Uploads via `user.upload()`#

Common Pitfalls#

Ошибка: Calling userEvent directly without initializing userEvent.setup()

Ошибка: Omitting the await keyword before userEvent operations

Ошибка: Using fireEvent.change instead of user.type for input validation

Ошибка: userEvent conflict with fake timers (vi.useFakeTimers)

Interview Questions#

Architectural Foundation#

Mental Model#

Architectural Comparison: `fireEvent` vs `userEvent`#

Syntax and API#

1. Initialization via `userEvent.setup()`#

2. Key `UserEvent` Instance Methods#

Practical Patterns#

Pattern 1: Complex Form with `onBlur` Validation and Submission#

Pattern 3: Testing Arrow Key Navigation in Listbox / Combobox#

Pattern 4: File Uploads via `user.upload()`#

Common Pitfalls#

Ошибка: Calling userEvent directly without initializing userEvent.setup()

Ошибка: Omitting the await keyword before userEvent operations

Ошибка: Using fireEvent.change instead of user.type for input validation

Ошибка: userEvent conflict with fake timers (vi.useFakeTimers)

Interview Questions#

Emulating User Actions with user-event v14+

Architectural Foundation#

Mental Model#

Architectural Comparison: fireEvent vs userEvent#

Syntax and API#

1. Initialization via userEvent.setup()#

2. Key UserEvent Instance Methods#

Practical Patterns#

Pattern 1: Complex Form with onBlur Validation and Submission#

Pattern 2: Testing Focus Trap in an Accessible Modal Dialog#

Pattern 3: Testing Arrow Key Navigation in Listbox / Combobox#

Pattern 4: File Uploads via user.upload()#

Common Pitfalls#

Ошибка: Calling userEvent directly without initializing userEvent.setup()

Ошибка: Omitting the await keyword before userEvent operations

Ошибка: Using fireEvent.change instead of user.type for input validation

Ошибка: userEvent conflict with fake timers (vi.useFakeTimers)

Interview Questions#

Related Topics#

Architectural Foundation#

Mental Model#

Architectural Comparison: fireEvent vs userEvent#

Syntax and API#

1. Initialization via userEvent.setup()#

2. Key UserEvent Instance Methods#

Practical Patterns#

Pattern 1: Complex Form with onBlur Validation and Submission#

Pattern 2: Testing Focus Trap in an Accessible Modal Dialog#

Pattern 3: Testing Arrow Key Navigation in Listbox / Combobox#

Pattern 4: File Uploads via user.upload()#

Common Pitfalls#

Ошибка: Calling userEvent directly without initializing userEvent.setup()

Ошибка: Omitting the await keyword before userEvent operations

Ошибка: Using fireEvent.change instead of user.type for input validation

Ошибка: userEvent conflict with fake timers (vi.useFakeTimers)

Interview Questions#

Related Topics#

Architectural Comparison: `fireEvent` vs `userEvent`#

1. Initialization via `userEvent.setup()`#

2. Key `UserEvent` Instance Methods#

Pattern 1: Complex Form with `onBlur` Validation and Submission#

Pattern 4: File Uploads via `user.upload()`#

Architectural Comparison: `fireEvent` vs `userEvent`#

1. Initialization via `userEvent.setup()`#

2. Key `UserEvent` Instance Methods#

Pattern 1: Complex Form with `onBlur` Validation and Submission#

Pattern 4: File Uploads via `user.upload()`#