Ngừng sử dụng fireEvent: Hướng dẫn React Testing user-event v14

+------------------------------------+------------------------------------+------------------------------------+
| Interaction Aspect                 | fireEvent (Legacy API)             | user-event (Modern v14 API)        |
+------------------------------------+------------------------------------+------------------------------------+
| Event Dispatch Mechanism           | Single synthetic DOM event         | Full realistic browser event chain |
| Disabled Element Enforcement       | Ignores disabled attributes        | Respects disabled DOM element state|
| Form Typing Behavior               | Overwrites value attribute instantly| Triggers keydown, keypress, input  |
| Setup Requirement                  | Direct static function call        | Requires userEvent.setup() instance|
| Async Execution Contract           | Synchronous execution              | Asynchronous Promise execution     |
+------------------------------------+------------------------------------+------------------------------------+

// Anti-Pattern: Testing with fireEvent skips realistic browser events
import { render, screen } from '@testing-library/react';
import fireEvent from '@testing-library/user-event';
import { UserForm } from './UserForm';

test('submits form using fireEvent (unrealistic event simulation)', () => {
  render(<UserForm />);

  const input = screen.getByLabelText(/username/i);
  const button = screen.getByRole('button', { name: /submit/i });

  // Instantly overwrites input value without keydown or input events
  fireEvent.change(input, { target: { value: 'john_doe' } });
  fireEvent.click(button);

  expect(screen.getByText(/welcome, john_doe/i)).toBeInTheDocument();
});

// Recommended Pattern: Testing with userEvent v14 simulates realistic typing
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UserForm } from './UserForm';

test('submits form using userEvent (realistic browser event simulation)', async () => {
  // Always call userEvent.setup() before rendering the component!
  const user = userEvent.setup();

  render(<UserForm />);

  const input = screen.getByLabelText(/username/i);
  const button = screen.getByRole('button', { name: /submit/i });

  // Simulates realistic keystrokes, focus changes, and character events
  await user.type(input, 'john_doe');
  await user.click(button);

  expect(await screen.findByText(/welcome, john_doe/i)).toBeInTheDocument();
});

const user = userEvent.setup({
  advanceTimers: vi.advanceTimersByTime,
  delay: null // Disables default typing delay during fast unit test execution
});

// components/UserList.tsx
import { useState, useEffect } from 'react';

export function UserList() {
  const [users, setUsers] = useState<string[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/users')
      .then((res) => {
        if (!res.ok) throw new Error('Network error');
        return res.json();
      })
      .then((data) => {
        setUsers(data.map((u: any) => u.name));
        setIsLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return <div role="status">Loading user directory...</div>;
  }

  if (error) {
    return <div role="alert">Failed to fetch user directory: {error}</div>;
  }

  return (
    <ul>
      {users.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

// components/UserList.test.tsx
import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
import { UserList } from './UserList';

test('renders loading spinner and displays fetched user directory', async () => {
  render(<UserList />);

  // Assert loading indicator is visible synchronously
  const loadingIndicator = screen.getByRole('status');
  expect(loadingIndicator).toHaveTextContent(/loading user directory/i);

  // Option A: Wait for loading element to disappear from DOM
  await waitForElementToBeRemoved(() => screen.queryByRole('status'));

  // Option B: Await findBy query for async element appearance
  const firstUser = await screen.findByText('Alice Smith');
  expect(firstUser).toBeInTheDocument();
});

+-----------------------------------------------------------------------------------+
| React Testing Library Query Selector Priority Hierarchy                           |
+-----------------------------------------------------------------------------------+
| Priority 1: Queries Accessible to Everyone                                       |
|  - getByRole (e.g., getByRole('button', { name: /save/i }))                       |
|  - getByLabelText (e.g., getByLabelText(/email address/i))                        |
|  - getByPlaceholderText (e.g., getByPlaceholderText(/search/i))                   |
|  - getByText (e.g., getByText(/submit form/i))                                   |
|  - getByDisplayValue (e.g., getByDisplayValue('john_doe'))                        |
+-----------------------------------------------------------------------------------+
| Priority 2: Semantic HTML Queries                                                 |
|  - getByAltText (e.g., getByAltText(/company logo/i))                            |
|  - getByTitle (e.g., getByTitle(/close dialog/i))                                |
+-----------------------------------------------------------------------------------+
| Priority 3: Test IDs (Last Resort Only)                                           |
|  - getByTestId (e.g., getByTestId('custom-canvas-node'))                          |
+-----------------------------------------------------------------------------------+

// Bad accessible markup: Missing label association
export function BadForm() {
  return (
    <div>
      <span>Username</span>
      <input type="text" id="user-input" />
      <button onClick={() => {}}>Submit</button>
    </div>
  );
}

// Good accessible markup: Explicit HTML label association
export function GoodForm() {
  return (
    <form>
      <label htmlFor="username-field">Username</label>
      <input type="text" id="username-field" />
      <button type="submit">Submit Form</button>
    </form>
  );
}

// mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  // Intercept GET requests to /api/users
  http.get('/api/users', () => {
    return HttpResponse.json([
      { id: '1', name: 'Alice Smith' },
      { id: '2', name: 'Bob Jones' }
    ]);
  }),

  // Intercept POST requests to /api/users
  http.post('/api/users', async ({ request }) => {
    const body = (await request.json()) as { name: string };

    if (!body.name) {
      return new HttpResponse('Name field is required.', { status: 400 });
    }

    return HttpResponse.json(
      { id: '3', name: body.name },
      { status: 201 }
    );
  })
];

// mocks/server.ts
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

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

// setupTests.ts
import '@testing-library/jest-dom';
import { beforeAll, afterEach, afterAll } from 'vitest';
import { server } from './mocks/server';

// Start server before running test suites
beforeAll(() => server.listen());

// Reset inline request handler overrides after each test
afterEach(() => server.resetHandlers());

// Clean up server after tests finish
afterAll(() => server.close());

// components/UserForm.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { server } from '../mocks/server';
import { UserForm } from './UserForm';

test('displays server error banner when API submission fails', async () => {
  // Override default MSW handler for this specific test case
  server.use(
    http.post('/api/users', () => {
      return new HttpResponse('Internal Server Error', { status: 500 });
    })
  );

  const user = userEvent.setup();
  render(<UserForm />);

  await user.type(screen.getByLabelText(/username/i), 'new_user');
  await user.click(screen.getByRole('button', { name: /submit/i }));

  // Assert error banner appears on 500 response
  const alert = await screen.findByRole('alert');
  expect(alert).toHaveTextContent(/internal server error/i);
});

// mocks/graphqlHandlers.ts
import { graphql, HttpResponse } from 'msw';

export const graphqlHandlers = [
  graphql.query('GetUserProfile', () => {
    return HttpResponse.json({
      data: {
        user: {
          id: 'usr_99',
          name: 'Sarah Connor',
          email: 'sarah@example.com'
        }
      }
    });
  })
];

+------------------------------------+------------------------------------+------------------------------------+
| Testing Layer Aspect               | Isolated Unit Component Test       | MSW Network Integration Test       |
+------------------------------------+------------------------------------+------------------------------------+
| Mocking Strategy                   | Function prop stubs & Jest mocks   | Network-level MSW HTTP interception|
| Execution Speed                    | Extremely Fast (< 10 ms per test)  | Very Fast (< 50 ms per test)       |
| Refactoring Resilience             | Low (Breaks on prop signature edit)| High (Resilient to internal refactor)|
| Confidence Level                   | Moderate (Tests components in isolation)| High (Tests full component lifecycle)|
+------------------------------------+------------------------------------+------------------------------------+