Back to Repositories

Testing React Component Hydration and Prerendering in facebook/react

This smoke test suite evaluates core React functionality using Playwright for end-to-end testing. It specifically focuses on promise handling, hydration, and prerendering behavior while monitoring console errors and page errors during test execution.

Test Coverage Overview

The test suite provides comprehensive coverage of critical React functionality:

Promise-based child component hydration
Prerendering behavior verification
Console error monitoring
Page error detection
Navigation between different routes (‘/’ and ‘/prerender’)

Implementation Analysis

The testing approach utilizes Playwright’s modern testing capabilities to evaluate React’s runtime behavior. It implements event listeners for console and page errors, ensuring robust error tracking during test execution. The test leverages Playwright’s built-in assertions and page navigation methods to validate component states and rendering outcomes.

Technical Details

Testing Framework: Playwright
Assertion Library: Playwright’s expect
Key Methods: page.goto(), getByTestId(), toHaveText(), toBeAttached()
Error Handling: Console and page error event listeners
Test Selectors: Data-testid attributes

Best Practices Demonstrated

The test exemplifies several testing best practices including proper error handling, explicit wait conditions, and clear test organization. It demonstrates effective use of data-testid selectors for reliable element targeting and comprehensive error monitoring through both console and page error tracking.

facebook/react

fixtures/flight/__tests__/__e2e__/smoke.test.js

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

test('smoke test', async ({page}) => {
  const consoleErrors = [];
  page.on('console', msg => {
    const type = msg.type();
    if (type === 'warn' || type === 'error') {
      consoleErrors.push({type: type, text: msg.text()});
    }
  });
  const pageErrors = [];
  page.on('pageerror', error => {
    pageErrors.push(error.stack);
  });
  await page.goto('/');
  await expect(page.getByTestId('promise-as-a-child-test')).toHaveText(
    'Promise as a child hydrates without errors: deferred text'
  );
  await expect(page.getByTestId('prerendered')).not.toBeAttached();

  await expect(consoleErrors).toEqual([]);
  await expect(pageErrors).toEqual([]);

  await page.goto('/prerender');
  await expect(page.getByTestId('prerendered')).toBeAttached();

  await expect(consoleErrors).toEqual([]);
  await expect(pageErrors).toEqual([]);
});