Skip to main content

​
Overview

sunpeak projects come pre-configured with testing tools and validation commands. The starter kit includes Vitest for unit testing and several npm scripts for code quality checks.

​
Available Commands

​
pnpm test
command
Run unit tests with Vitest
​
pnpm lint
command
Run ESLint and Prettier to check code style
​
pnpm typecheck
command
Check TypeScript types without building
​
pnpm validate
command
Run all validation commands (lint, typecheck, test)

​
Testing Setup

sunpeak uses Vitest, a fast unit testing framework built on Vite. The test configuration is in vitest.config.ts.

​
What’s Configured

The test environment includes:
  • jsdom: Browser-like environment for React component testing
  • @testing-library/react: For rendering and testing components
  • @testing-library/jest-dom: Additional matchers for assertions
  • Global test utilities: describe, it, expect, beforeEach, afterEach
  • Browser API mocks: matchMedia, IntersectionObserver, ResizeObserver
All configuration is in src/test/setup.ts.

​
Running Tests

Run all tests: 
pnpm test
Run tests in watch mode during development: 
pnpm test --watch
Run tests with coverage: 
pnpm test --coverage

​
Code Quality

Beyond unit tests, sunpeak includes tools for code quality:

​
Linting

ESLint and Prettier check code style and catch common issues: 
pnpm lint
This automatically fixes many issues. Check without fixing: 
pnpm lint --no-fix

​
Type Checking

TypeScript type checking catches type errors: 
pnpm typecheck
This runs faster than a full build and only checks types.

​
Validation

Run all checks at once: 
pnpm validate
This runs lint, typecheck, and test in sequence. Great for pre-commit checks.

​
Testing Best Practices

Test one thing per test case. Clear tests are maintainable tests.
// ✅ Good
it('displays error message when API fails', () => {})

// ❌ Bad
it('test 1', () => {})
Test what users see and interact with, not implementation details:
// ✅ Good
expect(screen.getByText('Submit')).toBeInTheDocument();

// ❌ Bad
expect(component.props.buttonLabel).toBe('Submit');
Use afterEach to reset state between tests:
afterEach(() => {
  // Clean up mocks, reset state, etc.
});

​
Dive Deeper

Vitest Docs

Learn more about Vitest