Automated React Performance Testing

# Install the package
npm install react-performance-tracking

import { Profiler } from 'react';
import {
  PerformanceProvider,
  usePerformanceRequired
} from 'react-performance-tracking/react';

function App() {
  return (
    <PerformanceProvider>
      <MyComponent />
    </PerformanceProvider>
  );
}

function MyComponent() {
  const { onProfilerRender } = usePerformanceRequired();
  return (
    <Profiler id="my-component" onRender={onProfilerRender}>
      {/* Your component content */}
    </Profiler>
  );
}

import { test as base } from '@playwright/test';
import { createPerformanceTest } from 'react-performance-tracking/playwright';

const test = createPerformanceTest(base);

test.performance({
  warmup: true,                       // First iteration for cache warming
  iterations: 5,                      // Run 5 times for reliability
  throttleRate: 4,                    // Simulate 4x slower CPU
  networkThrottling: 'fast-3g', // Simulate 3G
    network
  exportTrace: true,                  // Chrome DevTools flamegraph
  thresholds: {
    base: {
      profiler: {
        'my-component': {
          duration: { avg: 500, p95: 200, p99: 400 },
          rerenders: 15,
        },
      },
      fps: 60,
      memory: { heapGrowth: 10 * 1024 * 1024 },
      webVitals: { lcp: 2500, inp: 200, cls: 0.1 },
    },
    ci: {                              // More lenient in CI
      profiler: { 'my-component': { duration: {
      avg: 600 } } },
    },
  },
})('checkout flow performance', async ({ page, performance }) => {
  await page.goto('/checkout');
  await performance.init();

  // Track custom timing metrics
  performance.mark('form-start');
  await page.fill('input[name="email"]', 'test@example.com');
  await page.click('button[type="submit"]');
  await performance.waitUntilStable();
  performance.mark('form-end');

  const formTime = performance.measure('form-submit', 'form-start', 'form-end');
  console.log(`Form submission: ${formTime}ms`);
});