Add Vitest testing framework with comprehensive demo tests

[Copilot]

Overview

This PR adds Vitest as the testing framework for the React Performance Examples app and implements comprehensive tests for all four demo implementations, focusing on click interactions and render token behavior.

Problem

The repository had no automated testing to verify that the performance demos work correctly and exhibit the expected render behavior. Without tests, it was difficult to:

• Ensure demos maintain their performance characteristics
• Verify render token increments match expected patterns
• Catch regressions when making changes
• Document expected behavior through executable examples

Solution

Added Vitest with 18 tests across all four demos that validate:

Render Token Behavior

Tests verify the render token system works correctly, showing «001 on initial render and incrementing appropriately on interactions:

// Example: Zustand demo maintains efficient renders
it("should show initial render token «001 for World Selector", async () => {
  render(<ZustandRenderDemo />);
  const selectorTitle = screen.getByText(/World Selector/);
  expect(selectorTitle.textContent).toContain("«001");
});

it("should update world ID button render token when clicked", async () => {
  // Click world button updates its token to «002
  await user.click(worldButton);
  expect(updatedButton.textContent).toContain("«002");
});

Performance Characteristics

• Optimized demos (Zustand, PropDrilling): Tests verify memoization prevents unnecessary re-renders
• Naive demo (PropDrillingNaive): Tests account for extra renders from prop churn, validating the anti-pattern demonstration

User Interactions

All click interactions tested:

• Add World button functionality
• World ID button selection
• World viewer updates

Changes

Testing Infrastructure

• Vitest configured with jsdom environment in vite.config.ts
• Test setup (src/test/setup.ts) with:
  • Jest-DOM matchers for better assertions
  • scrollIntoView mock for jsdom compatibility
  • Render token counter reset for consistent test values
• Test scripts: npm test, npm run test:ui, npm run test:run

Test Files (18 tests)

• src/examples/zustand/ZustandRenderDemo.test.tsx (4 tests)
• src/examples/zustand-query/ZustandQuery.test.tsx (5 tests)
• src/examples/propDrilling/PropDrillingRenderDemo.test.tsx (4 tests)
• src/examples/propDrillingNaive/PropDrillingNaiveRenderDemo.test.tsx (5 tests)

Documentation

• Added TESTING.md with usage guide and testing patterns

Dependencies Added

• vitest - Fast test runner built on Vite
• @testing-library/react - React component testing utilities
• @testing-library/jest-dom - Custom DOM matchers
• @testing-library/user-event - Realistic user interaction simulation
• jsdom - DOM implementation for Node.js

Verification

✅ All 18 tests pass consistently
✅ ESLint passes with no errors
✅ TypeScript compilation succeeds
✅ Production build completes successfully

Example Usage

# Run all tests
npm run test:run

# Run tests in watch mode during development
npm test

# Run with UI for debugging
npm run test:ui

The tests ensure the educational value of the repository is maintained by making performance characteristics observable and testable through the render token system.

Original prompt

add Vitest to this app. Write tests for each demo. Focus on click interactions and the number of times the render token changes. For example /zustand loading should show World Selector «001. Clicking "add world" should change it to World Selector «002. Write tests for the other click interactions and demos. Assume their current render values are correct.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for react-performance-examples ready!

Name	Link
🔨 Latest commit	0e321a7
🔍 Latest deploy log	https://app.netlify.com/projects/react-performance-examples/deploys/68e3e50810030f000881db6b
😎 Deploy Preview	https://deploy-preview-21--react-performance-examples.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.