触发事件与测试用户交互

Simulating User Events in Tests

fireEvent.press for Button Taps

import { render, fireEvent } from '@testing-library/react-native';
import { Counter } from '../src/components/Counter';

it('increments the count when the plus button is pressed', () => {
  const { getByText } = render(<Counter />);

  // Assert initial state
  expect(getByText('Count: 0')).toBeTruthy();

  // Simulate button press
  fireEvent.press(getByText('+'));

  // Assert state changed
  expect(getByText('Count: 1')).toBeTruthy();

  // Press again
  fireEvent.press(getByText('+'));
  expect(getByText('Count: 2')).toBeTruthy();
});

fireEvent.changeText for TextInput

import { render, fireEvent } from '@testing-library/react-native';
import { SearchBar } from '../src/components/SearchBar';

it('calls onSearch with the typed query when submit is pressed', () => {
  const mockSearch = jest.fn();
  const { getByPlaceholderText, getByText } = render(
    <SearchBar onSearch={mockSearch} />
  );

  const input = getByPlaceholderText('Search...');

  // Simulate typing
  fireEvent.changeText(input, 'react native');

  // Simulate pressing the search button
  fireEvent.press(getByText('Search'));

  expect(mockSearch).toHaveBeenCalledWith('react native');
});

Testing Form Validation Errors

it('shows an error when email is empty and form is submitted', () => {
  const { getByText, getByRole, queryByText } = render(<LoginForm />);

  // Initially no error
  expect(queryByText('Email is required')).toBeNull();

  // Submit without filling in the email field
  fireEvent.press(getByRole('button', { name: 'Sign In' }));

  // Error message should now appear
  expect(getByText('Email is required')).toBeTruthy();
  expect(queryByText('Password is required')).toBeTruthy();
});

Testing Navigation Calls

const mockNavigate = jest.fn();
jest.mock('@react-navigation/native', () => ({
  ...jest.requireActual('@react-navigation/native'),
  useNavigation: () => ({ navigate: mockNavigate }),
}));

it('navigates to PostDetail when a post is pressed', () => {
  const { getByText } = render(<PostList posts={[
    { id: '1', title: 'Hello World' }
  ]} />);

  fireEvent.press(getByText('Hello World'));

  expect(mockNavigate).toHaveBeenCalledWith('PostDetail', { postId: '1' });
});

Testing with userEvent for More Realistic Interactions

import { render, userEvent } from '@testing-library/react-native';

it('shows inline error after leaving the email field empty', async () => {
  const user = userEvent.setup();
  const { getByPlaceholderText, findByText } = render(<RegistrationForm />);

  const emailInput = getByPlaceholderText('Email');

  // Focus the field, then leave it (triggers onBlur validation)
  await user.type(emailInput, '');
  await user.press(getByPlaceholderText('Password')); // Focus next field

  // Error appears after blur
  expect(await findByText('Email is required')).toBeTruthy();
});

Testing Toggle and Switch Components

import { render, fireEvent } from '@testing-library/react-native';
import { NotificationsSettings } from '../src/screens/NotificationsSettings';

it('toggles notifications when the switch is pressed', () => {
  const mockSave = jest.fn();
  const { getByTestId } = render(
    <NotificationsSettings onSave={mockSave} />
  );

  const toggle = getByTestId('notifications-toggle');

  // Simulate toggling the switch to true
  fireEvent(toggle, 'valueChange', true);

  expect(mockSave).toHaveBeenCalledWith({ notifications: true });

  // Toggle back to false
  fireEvent(toggle, 'valueChange', false);
  expect(mockSave).toHaveBeenCalledWith({ notifications: false });
});

Testing Async State Changes with act

import { render, fireEvent, act, waitFor } from '@testing-library/react-native';

it('shows success message after form submission', async () => {
  const { getByRole, findByText } = render(<ContactForm />);

  fireEvent.press(getByRole('button', { name: 'Submit' }));

  // findByText waits for the element to appear (async)
  const successMsg = await findByText('Message sent successfully!');
  expect(successMsg).toBeTruthy();

  // Alternative: use waitFor with getByText
  await waitFor(() => {
    expect(getByText('Message sent successfully!')).toBeTruthy();
  });
});

Testing Disabled States

it('disables the submit button while loading', async () => {
  const mockSubmit = jest.fn().mockReturnValue(new Promise(() => {})); // Never resolves
  const { getByRole } = render(<LoginForm onSubmit={mockSubmit} />);

  const emailInput = getByPlaceholderText('Email');
  const passwordInput = getByPlaceholderText('Password');
  fireEvent.changeText(emailInput, 'user@test.com');
  fireEvent.changeText(passwordInput, 'password123');

  const submitBtn = getByRole('button', { name: 'Sign In' });
  fireEvent.press(submitBtn);

  // Button should be disabled while the submit Promise is pending
  expect(submitBtn).toBeDisabled();
  expect(mockSubmit).toHaveBeenCalledTimes(1); // Not called again
});

Testing Scroll Events

it('loads more posts when scrolling to the bottom', () => {
  const mockLoadMore = jest.fn();
  const { getByTestId } = render(
    <PostList posts={mockPosts} onLoadMore={mockLoadMore} />
  );

  const list = getByTestId('posts-list');

  // Simulate scrolling to near the bottom
  fireEvent.scroll(list, {
    nativeEvent: {
      contentOffset: { y: 900 },
      contentSize: { height: 1000, width: 400 },
      layoutMeasurement: { height: 100, width: 400 },
    },
  });

  expect(mockLoadMore).toHaveBeenCalledTimes(1);
});

Organizing Tests with the User Journey Pattern

it('completes the login flow: type credentials, submit, show home', async () => {
  const { getByPlaceholderText, getByRole, findByText } = render(
    <LoginScreen />, { wrapper: NavigationWrapper }
  );

  // Step 1: Type email
  fireEvent.changeText(getByPlaceholderText('Email'), 'alice@test.com');

  // Step 2: Type password
  fireEvent.changeText(getByPlaceholderText('Password'), 'secret123');

  // Step 3: Submit
  fireEvent.press(getByRole('button', { name: 'Sign In' }));

  // Step 4: Assert navigation to home screen
  expect(await findByText('Welcome, Alice!')).toBeTruthy();
});

Quick Check

Lesson Recap