/artisan

Performance & Testing

Core Web Vitals, optimization strategies, Testing Trophy, Vitest v2, Storybook integration, RSC testing, and E2E patterns.

1. Core Web Vitals

2. Image Optimization

import Image from 'next/image';

// LCP image: priority (never lazy load)
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />

// Normal image: auto lazy loading
<Image src="/product.jpg" alt="Product" width={400} height={300} />

3. Bundle Size Reduction

Code Splitting

import { lazy, Suspense } from 'react';

// Route-based splitting (most effective: 40-60% initial load reduction)
const AdminDashboard = lazy(() => import('./AdminDashboard'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/admin" element={<AdminDashboard />} />
      </Routes>
    </Suspense>
  );
}

Bundle Analysis Checklist

• Regular bundle-analyzer checks
• Tree shaking enabled (sideEffects: false)
• Partial imports for large libraries (import { debounce } from 'lodash-es')
• next/dynamic for client-only lazy loading
• Third-party scripts with strategy="lazyOnload"

4. Rendering Optimization

Resource Hints

<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin />
<link rel="prefetch" href="/dashboard" />
<link rel="dns-prefetch" href="https://api.example.com" />

Performance Budget

5. Testing Trophy

"Write tests. Not too many. Mostly integration." — Kent C. Dodds

6. Vitest v2

Setup (Next.js)

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './vitest.setup.ts',
    css: true,
  },
  resolve: { alias: { '@': './src' } },
});

// vitest.setup.ts
import '@testing-library/jest-dom/vitest';

v2 Key Features (July 2024)

Browser Mode Setup

// vitest.config.ts (browser mode)
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
    },
  },
});

7. Testing Patterns

Component Test

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

describe('Counter', () => {
  it('increments count on click', async () => {
    const user = userEvent.setup(); // v14+: always use setup()
    render(<Counter initialCount={0} />);
    await user.click(screen.getByRole('button', { name: /increment/i }));
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });
});

API Mocking (MSW v2)

import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  http.get('/api/products', () => {
    return HttpResponse.json([{ id: 1, name: 'Product A' }]);
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Testing Library Query Priority

1. getByRole       ← Highest priority (improves a11y too)
2. getByLabelText  ← Form elements
3. getByText       ← Non-interactive elements
4. getByTestId     ← Last resort only

Principle: Test user-visible behavior, not implementation details.

8. RSC Testing Strategies

// Server Action unit test
import { describe, it, expect } from 'vitest';
import { createTodo } from './actions';

describe('createTodo', () => {
  it('validates and creates', async () => {
    const fd = new FormData();
    fd.set('title', 'Test Todo');
    const result = await createTodo({}, fd);
    expect(result.success).toBe(true);
  });

  it('returns errors for invalid input', async () => {
    const fd = new FormData();
    fd.set('title', '');
    const result = await createTodo({}, fd);
    expect(result.errors).toBeDefined();
  });
});

9. Storybook 8.5+ Integration

Vitest Browser Mode via Storybook

// .storybook/vitest.setup.ts
import { setProjectAnnotations } from '@storybook/react';
import * as projectAnnotations from './preview';

setProjectAnnotations(projectAnnotations);

Portable Stories

import { composeStories } from '@storybook/react';
import * as stories from './Button.stories';

const { Primary, Disabled } = composeStories(stories);

it('renders primary button', () => {
  render(<Primary />);
  expect(screen.getByRole('button')).toBeInTheDocument();
});

10. E2E (Playwright)

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

test('complete checkout flow', async ({ page }) => {
  await page.goto('/products');
  await page.click('[data-testid="product-1"] button');
  await expect(page.locator('[data-testid="cart-count"]')).toHaveText('1');
  await page.click('[data-testid="checkout-button"]');
  await page.fill('[name="email"]', 'test@example.com');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL(/\/order-confirmation/);
});

E2E scope: Revenue-critical paths only — signup → purchase → payment confirmation.

11. Anti-Patterns

Performance

Testing

Source: Vitest v2 Blog · Vitest Browser Mode · Storybook Testing · Testing Library Best Practices · MSW v2 Migration · web.dev CWV