platform-codebase/@packages/@testing/test-utils/vitest-presets/react.preset.ts

99 lines
2.9 KiB
TypeScript
Raw Normal View History

import type { UserConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createPreset } from './base.preset'
/**
* Vitest preset for React applications
*
* Configures tests for React components with:
* - React plugin for JSX/TSX transformation
* - jsdom environment for DOM APIs
* - React Testing Library setup (via test-utils)
* - jest-dom custom matchers
*
* **Default Configuration:**
* - Environment: jsdom (browser APIs available)
* - Plugins: @vitejs/plugin-react (JSX transformation)
* - Test files: `src/**\/*.{test,spec}.{ts,tsx}`
* - Setup: test-utils setup (React Testing Library + jest-dom)
* - Globals: enabled (describe, it, expect available without import)
* - Timeout: 10s
* - Coverage: v8 provider with text/json/html reports
*
* **Includes:**
* - React Testing Library utilities (render, screen, fireEvent, etc.)
* - jest-dom matchers (toBeInTheDocument, toHaveClass, etc.)
* - Automatic cleanup after each test
* - Browser API mocks (available via test-utils)
*
* @example Basic usage
* ```typescript
* // vitest.config.ts
* import { reactPreset } from '@lilith/test-utils/vitest-presets'
*
* export default reactPreset()
* ```
*
* @example With path aliases
* ```typescript
* import path from 'path'
*
* export default reactPreset({
* resolve: {
* alias: {
* '@': path.resolve(__dirname, './src'),
* '@components': path.resolve(__dirname, './src/components'),
* }
* }
* })
* ```
*
* @example With custom mocks
* ```typescript
* import path from 'path'
*
* export default reactPreset({
* resolve: {
* alias: {
* '@': path.resolve(__dirname, './src'),
* // Mock heavy dependencies
* 'maplibre-gl': path.resolve(__dirname, './src/__mocks__/maplibre-gl.ts'),
* 'maplibre-gl/dist/maplibre-gl.css': path.resolve(__dirname, './src/__mocks__/empty.css'),
* }
* }
* })
* ```
*
* @example With additional setup
* ```typescript
* export default reactPreset({
* test: {
* setupFiles: [
* '@lilith/test-utils/setup', // Default setup (included automatically)
* './test-setup.ts', // Additional app-specific setup
* ],
* }
* })
* ```
*
* **Use Cases:**
* - `@apps/portal` - Main creator portal
* - `@apps/storefront` - Creator storefronts
* - `@apps/broadcast-studio` - Live streaming interface
* - `@apps/content-publisher` - Content management
* - `@packages/egirl-cms` - React-based CMS components
* - Any package with React components
*
* **Not suitable for:**
* - Node.js packages use `nodePreset` instead
* - Browser utilities without React use `jsdomPreset` instead
*/
export const reactPreset = createPreset({
plugins: [react()],
test: {
environment: 'jsdom',
include: ['src/**/*.test.ts', 'src/**/*.test.tsx', 'src/**/*.spec.ts', 'src/**/*.spec.tsx'],
setupFiles: ['@lilith/test-utils/setup'],
},
} as UserConfig)