CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-ice--app

A universal framework based on React.js that provides scripts and configuration for web development with zero-config support for ES6+, TypeScript, routing, state management, and multi-platform deployment.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

testing.mddocs/

Test Configuration

Ice.js provides comprehensive testing integration with helpers for configuring Jest and Vitest with framework-specific optimizations, module resolution, and build pipeline integration.

Capabilities

Jest Configuration

Configure Jest with Ice.js framework defaults, module resolution, and optimizations.

/**
 * Define Jest configuration with Ice.js defaults and optimizations
 * @param userConfig - Jest configuration object or async function returning config
 * @returns Function that returns Promise resolving to complete Jest configuration
 */
function defineJestConfig(
  userConfig: JestConfig | (() => Promise<JestConfig>)
): () => Promise<JestConfig>;

interface JestConfig {
  /** Test environment */
  testEnvironment?: 'node' | 'jsdom' | string;
  /** Setup files to run before tests */
  setupFilesAfterEnv?: string[];
  /** Module name mapping for path aliases */
  moduleNameMapper?: Record<string, string>;
  /** File extensions to handle */
  moduleFileExtensions?: string[];
  /** Transform configuration */
  transform?: Record<string, string | [string, any]>;
  /** Files to collect coverage from */
  collectCoverageFrom?: string[];
  /** Coverage thresholds */
  coverageThreshold?: {
    global?: {
      branches?: number;
      functions?: number;
      lines?: number;
      statements?: number;
    };
  };
  /** Test match patterns */
  testMatch?: string[];
  /** Files to ignore */
  testPathIgnorePatterns?: string[];
  /** Module paths to ignore */
  modulePathIgnorePatterns?: string[];
  [key: string]: any;
}

Usage Examples:

// jest.config.js
import { defineJestConfig } from "@ice/app";

export default defineJestConfig({
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@components/(.*)$': '<rootDir>/src/components/$1',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
  },
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/**/*.stories.{ts,tsx}'
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80
    }
  }
});

// Dynamic configuration with async function
export default defineJestConfig(async () => {
  const baseConfig = {
    testEnvironment: 'jsdom',
    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts']
  };

  // Load additional configuration based on environment
  if (process.env.CI) {
    return {
      ...baseConfig,
      coverageReporters: ['text', 'lcov'],
      reporters: ['default', 'jest-junit']
    };
  }

  return {
    ...baseConfig,
    coverageReporters: ['text', 'html']
  };
});

Vitest Configuration

Configure Vitest with Ice.js framework integration and optimizations.

/**
 * Define Vitest configuration with Ice.js defaults and optimizations
 * @param userConfig - Vitest user configuration
 * @returns Vitest configuration function
 */
function defineVitestConfig(userConfig: UserConfigExport): UserConfigFn;

type UserConfigExport = UserConfig | Promise<UserConfig> | UserConfigFn;
type UserConfigFn = (env: ConfigEnv) => UserConfig | Promise<UserConfig>;

interface UserConfig {
  /** Test configuration */
  test?: VitestConfig;
  /** Build configuration */
  build?: BuildOptions;
  /** Plugin configuration */
  plugins?: Plugin[];
  /** Alias configuration */
  resolve?: {
    alias?: Record<string, string>;
  };
  /** Define global constants */
  define?: Record<string, any>;
  [key: string]: any;
}

interface VitestConfig {
  /** Test environment */
  environment?: 'node' | 'jsdom' | 'happy-dom';
  /** Globals configuration */
  globals?: boolean;
  /** Setup files */
  setupFiles?: string[];
  /** Include patterns */
  include?: string[];
  /** Exclude patterns */
  exclude?: string[];
  /** Coverage configuration */
  coverage?: {
    provider?: 'v8' | 'istanbul';
    reporter?: string[];
    exclude?: string[];
    thresholds?: {
      lines?: number;
      functions?: number;
      branches?: number;
      statements?: number;
    };
  };
}

Usage Examples:

// vitest.config.ts
import { defineVitestConfig } from "@ice/app";

export default defineVitestConfig({
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./src/setupTests.ts'],
    include: ['src/**/*.{test,spec}.{ts,tsx}'],
    exclude: ['node_modules', 'dist'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html', 'clover', 'json'],
      exclude: [
        'node_modules/',
        'src/setupTests.ts',
        '**/*.d.ts',
        '**/*.stories.{ts,tsx}'
      ],
      thresholds: {
        lines: 80,
        functions: 80,
        branches: 80,
        statements: 80
      }
    }
  },
  resolve: {
    alias: {
      '@': './src',
      '@components': './src/components',
      '@utils': './src/utils'
    }
  },
  define: {
    __TEST__: true
  }
});

// Advanced configuration with plugins and custom settings
import { defineVitestConfig } from "@ice/app";
import react from '@vitejs/plugin-react';

export default defineVitestConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./src/test/setup.ts'],
    include: ['src/**/*.{test,spec}.{ts,tsx}'],
    exclude: [
      'node_modules',
      'dist',
      'build',
      '**/*.e2e.{test,spec}.{ts,tsx}'
    ],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json-summary', 'html'],
      exclude: [
        'node_modules/',
        'src/test/',
        '**/*.d.ts',
        '**/*.config.{ts,js}',
        '**/index.ts' // Barrel files
      ]
    },
    testTimeout: 10000,
    hookTimeout: 10000
  },
  resolve: {
    alias: {
      '@': './src',
      '@test': './src/test'
    }
  }
});

Test Configuration Integration

Integrate test configurations with Ice.js build pipeline and development workflow.

/**
 * Test configuration utilities
 */
interface TestConfigurationUtils {
  /** Get task configuration for test command */
  getTaskConfig(): TaskConfig;
  /** Merge test configuration with framework defaults */
  mergeTestConfig(userConfig: any, defaults: any): any;
}

Usage Examples:

// Custom test configuration setup
import { defineJestConfig, defineVitestConfig } from "@ice/app";

// Shared test utilities
const sharedTestConfig = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@components/(.*)$': '<rootDir>/src/components/$1',
    '^@utils/(.*)$': '<rootDir>/src/utils/$1'
  },
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  testPathIgnorePatterns: [
    '/node_modules/',
    '/dist/',
    '/build/'
  ]
};

// Jest configuration for unit tests
export const jestConfig = defineJestConfig({
  ...sharedTestConfig,
  testEnvironment: 'jsdom',
  testMatch: [
    '<rootDir>/src/**/__tests__/**/*.{ts,tsx}',
    '<rootDir>/src/**/*.{test,spec}.{ts,tsx}'
  ],
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/**/{stories,__tests__}/**',
    '!src/test/**'
  ]
});

// Vitest configuration for integration tests
export const vitestConfig = defineVitestConfig({
  test: {
    environment: 'jsdom',
    include: ['src/**/*.integration.{test,spec}.{ts,tsx}'],
    testTimeout: 30000
  },
  resolve: {
    alias: {
      '@': './src',
      '@components': './src/components'
    }
  }
});

Framework-Specific Test Setup

Configure testing with Ice.js-specific setup and mocking.

/**
 * Ice.js-specific test setup utilities
 */
interface IceTestSetup {
  /** Mock Ice.js runtime modules */
  mockRuntimeModules(): void;
  /** Setup test environment for Ice.js components */
  setupTestEnvironment(): void;
  /** Create test utilities for Ice.js features */
  createTestUtils(): TestUtils;
}

interface TestUtils {
  /** Render component with Ice.js providers */
  renderWithProviders(component: React.ReactElement): RenderResult;
  /** Mock router for testing */
  mockRouter(routes: RouteConfig[]): void;
  /** Setup mock server for API tests */
  setupMockServer(): MockServer;
}

Usage Examples:

// setupTests.ts - Test environment setup
import '@testing-library/jest-dom';

// Mock Ice.js runtime modules
jest.mock('@ice/runtime', () => ({
  useAppData: jest.fn(),
  usePageLifecycle: jest.fn(),
  history: {
    push: jest.fn(),
    replace: jest.fn(),
    go: jest.fn()
  }
}));

// Mock Ice.js app configuration
jest.mock('./ice.config.ts', () => ({
  default: {
    router: {
      type: 'browser'
    },
    server: {
      format: 'esm'
    }
  }
}));

// Global test utilities
global.renderWithIceProviders = (component: React.ReactElement) => {
  return render(component, {
    wrapper: ({ children }) => (
      <Router>
        <AppProvider>
          {children}
        </AppProvider>
      </Router>
    )
  });
};

// Test utilities file - testUtils.ts
import { render, RenderResult } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';

export function renderWithRouter(
  component: React.ReactElement,
  { initialEntries = ['/'], ...options } = {}
): RenderResult & { history: any } {
  const history = createMemoryHistory({ initialEntries });
  
  const Wrapper = ({ children }: { children: React.ReactNode }) => (
    <Router location={history.location} navigator={history}>
      {children}
    </Router>
  );

  return {
    ...render(component, { wrapper: Wrapper, ...options }),
    history
  };
}

export function mockApiResponse(url: string, response: any) {
  fetchMock.mockResponseOnce(JSON.stringify(response));
}

// Usage in tests
import { renderWithRouter, mockApiResponse } from '../testUtils';
import { MyComponent } from './MyComponent';

describe('MyComponent', () => {
  test('renders with router integration', () => {
    const { getByText, history } = renderWithRouter(<MyComponent />);
    
    expect(getByText('Welcome')).toBeInTheDocument();
    
    // Test navigation
    fireEvent.click(getByText('Navigate'));
    expect(history.location.pathname).toBe('/dashboard');
  });

  test('handles API calls', async () => {
    mockApiResponse('/api/user', { name: 'John', id: 1 });
    
    render(<MyComponent />);
    
    await waitFor(() => {
      expect(screen.getByText('John')).toBeInTheDocument();
    });
  });
});

Testing Best Practices

Best practices for testing Ice.js applications with the provided configuration helpers.

/**
 * Testing best practices for Ice.js applications
 */
interface TestingBestPractices {
  /** Component testing patterns */
  componentTesting: {
    unitTests: string[];
    integrationTests: string[];
    e2eTests: string[];
  };
  /** Mock strategies */
  mockingStrategies: {
    runtimeModules: string[];
    apiCalls: string[];
    routerMocks: string[];
  };
  /** Performance testing */
  performanceTesting: {
    bundleSize: boolean;
    renderPerformance: boolean;
    memoryLeaks: boolean;
  };
}

Usage Examples:

// Component testing example
import { defineJestConfig } from "@ice/app";

export default defineJestConfig({
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  
  // Organize tests by type
  projects: [
    {
      displayName: 'unit',
      testMatch: ['<rootDir>/src/**/*.test.{ts,tsx}'],
      setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts']
    },
    {
      displayName: 'integration',
      testMatch: ['<rootDir>/src/**/*.integration.test.{ts,tsx}'],
      setupFilesAfterEnv: [
        '<rootDir>/src/setupTests.ts',
        '<rootDir>/src/setupIntegrationTests.ts'
      ],
      testTimeout: 30000
    }
  ],

  // Coverage configuration
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/**/*.stories.{ts,tsx}',
    '!src/test/**'
  ],
  
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 85,
      lines: 85,
      statements: 85
    },
    // Specific thresholds for critical components
    './src/components/': {
      branches: 90,
      functions: 90,
      lines: 90,
      statements: 90
    }
  }
});

This testing configuration system provides comprehensive integration with Ice.js framework features while maintaining flexibility for custom test setups and advanced testing scenarios.

docs

analysis.md

cli.md

configuration.md

index.md

logging.md

service.md

testing.md

types.md

tile.json