Skip to content

feat: set up testing infrastructure #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 5, 2025
Merged

Conversation

nullcoder
Copy link
Owner

Summary

  • Set up vitest testing framework with React Testing Library
  • Configured for edge runtime compatibility
  • Created comprehensive test examples
  • All tests passing successfully

Changes

Testing Framework

  • Vitest: Modern, fast test runner with native ESM support
  • @testing-library/react: Component testing utilities
  • happy-dom: Lightweight DOM implementation for tests
  • @testing-library/jest-dom: Custom matchers for DOM assertions

Configuration

  • Created vitest.config.ts with path aliases and coverage settings
  • Set up test/setup.tsx with:
    • jest-dom matchers
    • Next.js router mocks
    • Next.js Image component mock
    • Crypto API polyfill for edge runtime

Example Tests

  1. utils.test.ts: Tests for the cn utility function

    • Class name merging
    • Conditional classes
    • Tailwind class conflicts
  2. theme-toggle.test.tsx: Component testing example

    • Rendering tests
    • Icon visibility
    • Mock interactions
  3. edge-runtime.test.ts: Edge compatibility tests

    • nanoid ID generation
    • CodeMirror state management (no DOM)
    • Crypto API availability

Scripts Added

  • npm test: Run tests in watch mode
  • npm run test:ui: Open Vitest UI
  • npm run test:run: Run tests once (CI mode)
  • npm run test:coverage: Generate coverage report

Testing

  • All tests pass (15 tests in 3 test files)
  • TypeScript compilation works with test files
  • Coverage reporting configured
  • Edge runtime mocks working correctly
  • Component tests render properly

Screenshots

 ✓ lib/utils.test.ts (5 tests) 4ms
 ✓ lib/edge-runtime.test.ts (7 tests) 5ms
 ✓ components/theme-toggle.test.tsx (3 tests) 22ms

 Test Files  3 passed (3)
      Tests  15 passed (15)

Closes #10

🤖 Generated with Claude Code

- Installed vitest with React testing library and happy-dom
- Configured vitest for edge runtime compatibility
- Created test setup with jest-dom matchers and Next.js mocks
- Added comprehensive example tests for utilities, components, and edge runtime
- Configured test scripts (test, test:ui, test:run, test:coverage)
- All tests passing with proper TypeScript support

Tests verify:
- Utility functions (cn class merging)
- React components (ThemeToggle)
- Edge runtime compatibility (nanoid, CodeMirror state, crypto API)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@nullcoder nullcoder added enhancement New feature or request testing Tests and test infrastructure labels Jun 5, 2025
@nullcoder nullcoder self-assigned this Jun 5, 2025
Copy link

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
ghostpaste b6d5ebc Visit preview Jun 05 2025, 09:55 AM

@nullcoder nullcoder merged commit a0b2763 into main Jun 5, 2025
1 check passed
@nullcoder nullcoder deleted the feat/testing-setup branch June 5, 2025 09:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request testing Tests and test infrastructure
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Set up testing infrastructure
1 participant