@jmruthers/pace-core 0.6.6 → 0.6.8

package/scripts/install-eslint-config.cjs

@@ -0,0 +1,349 @@
+#!/usr/bin/env node
+
+/**
+ * Installation Script for pace-core ESLint Config
+ * @package @jmruthers/pace-core
+ * @module Scripts/install-eslint-config
+ * 
+ * Sets up pace-core ESLint configuration in consuming apps.
+ * Adds pace-core ESLint config to consuming app's ESLint configuration.
+ * 
+ * This is an opt-in script - it does NOT run automatically via postinstall.
+ * 
+ * Usage:
+ *   node install-eslint-config.cjs        # Setup ESLint config
+ *   node install-eslint-config.cjs --force # Force update even if already configured
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Check for safety guards
+function checkSafetyGuards() {
+  // Check environment variable
+  if (process.env.PACE_ESLINT_CONFIG_DISABLED === '1') {
+    console.log(`${colors.yellow}Skipping ESLint config installation: PACE_ESLINT_CONFIG_DISABLED=1${colors.reset}`);
+    process.exit(0);
+  }
+  
+  // Check for .git folder (safety guard for CI)
+  const cwd = process.cwd();
+  if (!fs.existsSync(path.join(cwd, '.git'))) {
+    console.log(`${colors.yellow}Skipping ESLint config installation: No .git folder found${colors.reset}`);
+    console.log(`${colors.yellow}This is a safety guard. If you want to install anyway, run with --force${colors.reset}`);
+    if (!process.argv.includes('--force')) {
+      process.exit(0);
+    }
+  }
+}
+
+// ANSI color codes for terminal output
+const colors = {
+  reset: '\x1b[0m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+  bold: '\x1b[1m',
+  red: '\x1b[31m'
+};
+
+// Find existing ESLint config file
+function findESLintConfig() {
+  const cwd = process.cwd();
+  const possibleConfigs = [
+    'eslint.config.js',
+    'eslint.config.cjs',
+    'eslint.config.mjs',
+    '.eslintrc.js',
+    '.eslintrc.cjs',
+    '.eslintrc.json',
+    '.eslintrc.yaml',
+    '.eslintrc.yml',
+  ];
+  
+  for (const configFile of possibleConfigs) {
+    const configPath = path.join(cwd, configFile);
+    if (fs.existsSync(configPath)) {
+      return { path: configPath, name: configFile, isESM: configFile.endsWith('.js') || configFile.endsWith('.mjs') };
+    }
+  }
+  
+  return null;
+}
+
+// Check if pace-core config is already included
+function hasPaceCoreConfig(configContent) {
+  // Check for pace-core config import/require
+  const paceCorePatterns = [
+    /@jmruthers\/pace-core\/eslint-config/,
+    /pace-core\/eslint-config/,
+    /paceCoreConfig/,
+    /pace-core-compliance/,
+  ];
+  
+  return paceCorePatterns.some(pattern => pattern.test(configContent));
+}
+
+// Detect if file is ES module
+function isESModule(filePath, content) {
+  if (filePath.endsWith('.mjs')) return true;
+  if (filePath.endsWith('.cjs')) return false;
+  if (filePath.endsWith('.js')) {
+    // Check for ES module indicators
+    return /^import\s+.*from|^export\s+default/.test(content.trim());
+  }
+  return false;
+}
+
+// Detect if config uses tseslint.config() wrapper
+function usesTseslintConfig(content) {
+  return /tseslint\.config\s*\(/.test(content);
+}
+
+// Validate ESLint config structure
+function validateConfig(configPath, content) {
+  try {
+    // Basic validation - check for common syntax errors
+    // Check for balanced brackets
+    const openBrackets = (content.match(/\[/g) || []).length;
+    const closeBrackets = (content.match(/\]/g) || []).length;
+    if (openBrackets !== closeBrackets) {
+      return { valid: false, error: `Unbalanced brackets: ${openBrackets} open, ${closeBrackets} close` };
+    }
+    
+    // Check for balanced parentheses
+    const openParens = (content.match(/\(/g) || []).length;
+    const closeParens = (content.match(/\)/g) || []).length;
+    if (openParens !== closeParens) {
+      return { valid: false, error: `Unbalanced parentheses: ${openParens} open, ${closeParens} close` };
+    }
+    
+    // Check that paceCoreConfig is spread correctly
+    if (content.includes('...paceCoreConfig')) {
+      // Should be spread in an array or tseslint.config()
+      if (!content.includes('[...paceCoreConfig') && !content.includes('tseslint.config(...paceCoreConfig')) {
+        return { valid: false, error: 'paceCoreConfig must be spread in an array or tseslint.config()' };
+      }
+    }
+    
+    return { valid: true };
+  } catch (error) {
+    return { valid: false, error: error.message };
+  }
+}
+
+// Backup file before modification
+function backupFile(filePath) {
+  const backupPath = `${filePath}.backup.${Date.now()}`;
+  fs.copyFileSync(filePath, backupPath);
+  return backupPath;
+}
+
+// Setup ESLint configuration
+function setupESLintConfig(force = false) {
+  const cwd = process.cwd();
+  const existingConfig = findESLintConfig();
+  
+  if (existingConfig) {
+    // Read existing config
+    let content = fs.readFileSync(existingConfig.path, 'utf8');
+    const isESM = isESModule(existingConfig.path, content);
+    const format = isESM ? 'ES Module' : 'CommonJS';
+    
+    console.log(`${colors.cyan}Found ESLint config:${colors.reset} ${existingConfig.name} (${format})`);
+    
+    // Check if already configured
+    if (hasPaceCoreConfig(content)) {
+      if (!force) {
+        console.log(`${colors.blue}○${colors.reset} ${existingConfig.name} already includes pace-core rules`);
+        console.log(`${colors.blue}  Use --force to update.${colors.reset}`);
+        return { action: 'skipped', file: existingConfig.name, format };
+      }
+      
+      console.log(`${colors.yellow}Updating existing ESLint config...${colors.reset}`);
+    } else {
+      console.log(`${colors.cyan}Adding pace-core config to ${existingConfig.name}...${colors.reset}`);
+    }
+    
+    // Backup before modification
+    const backupPath = backupFile(existingConfig.path);
+    console.log(`${colors.cyan}  Backed up to ${path.basename(backupPath)}${colors.reset}`);
+    
+    // Add pace-core config
+    if (isESM) {
+      // ES Module format
+      if (!content.includes('import paceCoreConfig')) {
+        // Add import at top (after other imports if they exist)
+        const importLines = content.match(/^(import\s+[^;]+;?\s*\n)+/m);
+        if (importLines) {
+          // Add after existing imports
+          content = content.replace(
+            importLines[0],
+            `${importLines[0]}import paceCoreConfig from '@jmruthers/pace-core/eslint-config';\n`
+          );
+        } else {
+          // Add at the beginning
+          content = `import paceCoreConfig from '@jmruthers/pace-core/eslint-config';\n${content}`;
+        }
+      }
+      
+      // Handle tseslint.config() wrapper
+      if (usesTseslintConfig(content)) {
+        // Config uses tseslint.config() - spread paceCoreConfig as first argument
+        if (!content.includes('...paceCoreConfig')) {
+          // Find tseslint.config( and add paceCoreConfig as first argument
+          // Handle both cases: tseslint.config(...) and tseslint.config(\n...)
+          if (content.match(/tseslint\.config\s*\(\s*[^\n]/)) {
+            // Has content on same line, add after opening paren
+            content = content.replace(
+              /(tseslint\.config\s*\()\s*/,
+              '$1\n    ...paceCoreConfig,\n    '
+            );
+          } else {
+            // Has content on new line, add as first line
+            content = content.replace(
+              /(tseslint\.config\s*\(\s*\n)\s*/,
+              '$1    ...paceCoreConfig,\n    '
+            );
+          }
+        }
+      } else if (content.includes('export default [')) {
+        // Already an array, add paceCoreConfig at the beginning
+        if (!content.includes('...paceCoreConfig')) {
+          content = content.replace(
+            /(export\s+default\s*\[)\s*/,
+            '$1\n  ...paceCoreConfig,'
+          );
+        }
+      } else if (content.includes('export default')) {
+        // Not an array, wrap it
+        const exportMatch = content.match(/(export\s+default\s+)(.+?)(;?\s*$)/s);
+        if (exportMatch) {
+          content = content.replace(
+            exportMatch[0],
+            `${exportMatch[1]}[\n  ...paceCoreConfig,\n  ${exportMatch[2]}\n];`
+          );
+        }
+      }
+    } else {
+      // CommonJS format
+      if (!content.includes('require(\'@jmruthers/pace-core/eslint-config\')')) {
+        // Add require at top (after other requires if they exist)
+        const requireLines = content.match(/^(const\s+\w+\s*=\s*require\([^)]+\);\s*\n)+/m);
+        if (requireLines) {
+          content = content.replace(
+            requireLines[0],
+            `${requireLines[0]}const paceCoreConfig = require('@jmruthers/pace-core/eslint-config');\n`
+          );
+        } else {
+          content = `const paceCoreConfig = require('@jmruthers/pace-core/eslint-config');\n${content}`;
+        }
+      }
+      
+      // Add to module.exports
+      if (content.includes('module.exports = [')) {
+        // Already an array, add paceCoreConfig at the beginning
+        if (!content.includes('...paceCoreConfig')) {
+          content = content.replace(
+            /(module\.exports\s*=\s*\[)\s*/,
+            '$1\n  ...paceCoreConfig,'
+          );
+        }
+      } else if (content.includes('module.exports =')) {
+        // Not an array, wrap it
+        const exportMatch = content.match(/(module\.exports\s*=\s*)(.+?)(;?\s*$)/s);
+        if (exportMatch) {
+          content = content.replace(
+            exportMatch[0],
+            `${exportMatch[1]}[\n  ...paceCoreConfig,\n  ${exportMatch[2]}\n];`
+          );
+        }
+      }
+    }
+    
+    // Validate config before writing
+    const validation = validateConfig(existingConfig.path, content);
+    if (!validation.valid) {
+      console.error(`${colors.red}✗${colors.reset} Config validation failed: ${validation.error}`);
+      console.error(`${colors.yellow}  Restoring backup...${colors.reset}`);
+      fs.copyFileSync(backupPath, existingConfig.path);
+      throw new Error(`Invalid ESLint config structure: ${validation.error}`);
+    }
+    
+    // Write updated config
+    fs.writeFileSync(existingConfig.path, content, 'utf8');
+    console.log(`${colors.green}✓${colors.reset} Updated ${existingConfig.name}`);
+    return { action: 'updated', file: existingConfig.name, backup: backupPath, format };
+  } else {
+    // Create new ESLint config (default to ES modules)
+    const configPath = path.join(cwd, 'eslint.config.js');
+    const configContent = `import paceCoreConfig from '@jmruthers/pace-core/eslint-config';
+
+export default [
+  ...paceCoreConfig,
+  // Your app-specific ESLint configuration
+  {
+    // Add your rules here
+  },
+];
+`;
+    
+    console.log(`${colors.cyan}No ESLint config found. Creating eslint.config.js...${colors.reset}`);
+    fs.writeFileSync(configPath, configContent, 'utf8');
+    console.log(`${colors.green}✓${colors.reset} Created eslint.config.js`);
+    console.log(`${colors.cyan}  Edit eslint.config.js to add your app-specific ESLint rules.${colors.reset}`);
+    return { action: 'created', file: 'eslint.config.js', format: 'ES Module' };
+  }
+}
+
+// Main execution
+function main() {
+  checkSafetyGuards();
+  
+  const force = process.argv.includes('--force');
+  
+  if (force) {
+    console.log(`${colors.yellow}Warning: --force flag is set. This will overwrite existing configurations.${colors.reset}\n`);
+  }
+  
+  try {
+    console.log(`${colors.cyan}Setting up ESLint configuration from pace-core...${colors.reset}\n`);
+    const result = setupESLintConfig(force);
+    
+    // Summary
+    console.log(`\n${colors.bold}Setup Summary:${colors.reset}`);
+    if (result.action === 'created') {
+      console.log(`  ${colors.green}ESLint Config:${colors.reset} Created ${result.file} (${result.format})`);
+    } else if (result.action === 'updated') {
+      console.log(`  ${colors.green}ESLint Config:${colors.reset} Updated ${result.file} (${result.format})`);
+      console.log(`  ${colors.yellow}Backup:${colors.reset} ${path.basename(result.backup)}`);
+    } else {
+      console.log(`  ${colors.blue}ESLint Config:${colors.reset} Already configured (${result.file}, ${result.format})`);
+    }
+    
+    console.log(`\n${colors.cyan}ESLint configuration is now available${colors.reset}`);
+    console.log(`\n${colors.cyan}Next steps:${colors.reset}`);
+    console.log(`  • Run ${colors.bold}npm run lint${colors.reset} to verify ESLint is working`);
+    console.log(`  • Edit your ESLint config to add app-specific rules`);
+    console.log(`  • See ${colors.bold}packages/core/docs/standards/${colors.reset} for complete standards documentation`);
+    
+  } catch (error) {
+    console.error(`${colors.red}Error during setup:${colors.reset}`);
+    console.error(error.message);
+    if (error.stack) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+}
+
+// Run if called directly
+if (require.main === module) {
+  main();
+}
+
+module.exports = { 
+  setupESLintConfig,
+  findESLintConfig
+};

package/scripts/validate-dependencies.cjs

@@ -0,0 +1,248 @@
+#!/usr/bin/env node
+
+/**
+ * Dependency Validation Script
+ * @package @jmruthers/pace-core
+ * @module Scripts/ValidateDependencies
+ * 
+ * Validates consistency between package.json, audit tool, and documentation.
+ * Ensures package.json is the single source of truth for dependencies.
+ * 
+ * Checks:
+ * - All peerDependencies have corresponding entries in peerDependenciesMeta
+ * - No peer dependency is also in dependencies
+ * - Required peers (not optional) are correctly marked
+ * - Audit tool can read package.json correctly
+ * - No hardcoded dependency lists exist in audit tool
+ * 
+ * Usage:
+ *   node scripts/validate-dependencies.cjs
+ *   npm run validate:dependencies
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Colors for terminal output
+const colors = {
+  reset: '\x1b[0m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+  bold: '\x1b[1m',
+};
+
+// Get package.json path
+const packageJsonPath = path.resolve(__dirname, '../package.json');
+const auditToolPath = path.resolve(__dirname, '../audit-tool/00-dependencies.cjs');
+
+let hasErrors = false;
+let hasWarnings = false;
+
+/**
+ * Check package.json structure
+ */
+function validatePackageJson() {
+  console.log(`${colors.blue}Validating package.json structure...${colors.reset}`);
+  
+  if (!fs.existsSync(packageJsonPath)) {
+    console.error(`${colors.red}Error: package.json not found at ${packageJsonPath}${colors.reset}`);
+    return false;
+  }
+  
+  const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+  const peerDeps = pkg.peerDependencies || {};
+  const peerMeta = pkg.peerDependenciesMeta || {};
+  const dependencies = pkg.dependencies || {};
+  
+  let valid = true;
+  
+  // Check 1: All OPTIONAL peerDependencies must have entries in peerDependenciesMeta
+  // Required peers (not optional) should NOT be in peerDependenciesMeta
+  // Only optional peers need to be explicitly marked
+  const optionalPeersInMeta = Object.keys(peerMeta).filter(dep => peerMeta[dep]?.optional);
+  const optionalPeersNotInMeta = Object.keys(peerDeps).filter(dep => {
+    // If it's in dependencies, it shouldn't be a peer at all (handled by check 2)
+    if (dependencies[dep]) return false;
+    // If it's marked as optional in meta, it's fine
+    if (peerMeta[dep]?.optional) return false;
+    // If it's not in meta and not in dependencies, we need to check if it should be optional
+    // For now, we'll only warn if a peer is in meta but not marked as optional
+    return false;
+  });
+  
+  // Check for peers that are marked as optional in meta but should be required
+  // This is a warning, not an error, as the audit tool will treat them correctly
+  const requiredPeersInMeta = Object.keys(peerMeta).filter(
+    dep => peerDeps[dep] && !peerMeta[dep]?.optional
+  );
+  if (requiredPeersInMeta.length > 0) {
+    console.warn(`${colors.yellow}⚠️  Warning: The following required peers are in peerDependenciesMeta (they don't need to be):${colors.reset}`);
+    requiredPeersInMeta.forEach(dep => {
+      console.warn(`  - ${colors.yellow}${dep}${colors.reset}`);
+    });
+    console.warn(`${colors.yellow}  → Required peers don't need to be in peerDependenciesMeta (only optional ones do)${colors.reset}`);
+    hasWarnings = true;
+  }
+  
+  // Check 2: No peer dependency is also in dependencies
+  const duplicateDeps = Object.keys(peerDeps).filter(dep => dependencies[dep]);
+  if (duplicateDeps.length > 0) {
+    console.error(`${colors.red}❌ Error: The following packages appear in both peerDependencies and dependencies:${colors.reset}`);
+    duplicateDeps.forEach(dep => {
+      console.error(`  - ${colors.red}${dep}${colors.reset}`);
+    });
+    console.error(`${colors.yellow}  → Remove them from peerDependencies (they're already included)${colors.reset}`);
+    valid = false;
+    hasErrors = true;
+  }
+  
+  // Check 3: Verify no required peers are marked as optional
+  // Required peers are those NOT in peerDependenciesMeta (or marked as optional: false)
+  const requiredPeers = Object.keys(peerDeps).filter(dep => {
+    // If it's in dependencies, it's not a peer (handled by check 2)
+    if (dependencies[dep]) return false;
+    // If it's not in meta, it's required by default
+    if (!peerMeta[dep]) return true;
+    // If it's in meta and marked as optional: false, it's required
+    if (peerMeta[dep]?.optional === false) return true;
+    // If it's in meta and marked as optional: true, it's optional
+    return false;
+  });
+  
+  const incorrectlyOptional = requiredPeers.filter(dep => peerMeta[dep]?.optional === true);
+  if (incorrectlyOptional.length > 0) {
+    console.error(`${colors.red}❌ Error: The following required peers are incorrectly marked as optional:${colors.reset}`);
+    incorrectlyOptional.forEach(dep => {
+      console.error(`  - ${colors.red}${dep}${colors.reset}`);
+    });
+    console.error(`${colors.yellow}  → Remove "optional": true from peerDependenciesMeta for these packages (or remove them from meta entirely)${colors.reset}`);
+    valid = false;
+    hasErrors = true;
+  }
+  
+  // Check 4: Warn about extra entries in peerDependenciesMeta that don't exist in peerDependencies
+  const extraMeta = Object.keys(peerMeta).filter(dep => !peerDeps[dep]);
+  if (extraMeta.length > 0) {
+    console.warn(`${colors.yellow}⚠️  Warning: The following entries in peerDependenciesMeta don't exist in peerDependencies:${colors.reset}`);
+    extraMeta.forEach(dep => {
+      console.warn(`  - ${colors.yellow}${dep}${colors.reset}`);
+    });
+    console.warn(`${colors.yellow}  → Remove them from peerDependenciesMeta or add them to peerDependencies${colors.reset}`);
+    hasWarnings = true;
+  }
+  
+  if (valid && duplicateDeps.length === 0) {
+    console.log(`${colors.green}✅ package.json structure is valid${colors.reset}`);
+  }
+  
+  return valid;
+}
+
+/**
+ * Check audit tool consistency
+ */
+function validateAuditTool() {
+  console.log(`${colors.blue}Validating audit tool consistency...${colors.reset}`);
+  
+  if (!fs.existsSync(auditToolPath)) {
+    console.error(`${colors.red}Error: Audit tool not found at ${auditToolPath}${colors.reset}`);
+    return false;
+  }
+  
+  const auditToolContent = fs.readFileSync(auditToolPath, 'utf8');
+  let valid = true;
+  
+  // Check 1: Verify no hardcoded REQUIRED_PEERS array
+  const hardcodedPattern = /const\s+REQUIRED_PEERS\s*=\s*\[['"][^'"]+['"]/;
+  if (hardcodedPattern.test(auditToolContent)) {
+    console.error(`${colors.red}❌ Error: Found hardcoded REQUIRED_PEERS array in audit tool${colors.reset}`);
+    console.error(`${colors.yellow}  → The audit tool should read required/optional peers from peerDependenciesMeta${colors.reset}`);
+    valid = false;
+    hasErrors = true;
+  }
+  
+  // Check 2: Verify audit tool uses peerDependenciesMeta
+  if (!auditToolContent.includes('peerDependenciesMeta')) {
+    console.error(`${colors.red}❌ Error: Audit tool does not reference peerDependenciesMeta${colors.reset}`);
+    console.error(`${colors.yellow}  → The audit tool should read from peerDependenciesMeta to determine required vs optional peers${colors.reset}`);
+    valid = false;
+    hasErrors = true;
+  }
+  
+  // Check 3: Verify audit tool can read package.json
+  if (!auditToolContent.includes('findPaceCorePackageJson')) {
+    console.warn(`${colors.yellow}⚠️  Warning: Audit tool may not be able to find pace-core package.json${colors.reset}`);
+    hasWarnings = true;
+  }
+  
+  // Check 4: Try to load and test the audit tool
+  try {
+    const { runDependencyAudit } = require(auditToolPath);
+    if (typeof runDependencyAudit !== 'function') {
+      console.error(`${colors.red}❌ Error: Audit tool does not export runDependencyAudit function${colors.reset}`);
+      valid = false;
+      hasErrors = true;
+    } else {
+      // Test that it can read package.json (use current directory as test)
+      const testResult = runDependencyAudit(path.resolve(__dirname, '../..'));
+      if (testResult.error && testResult.error.includes('package.json')) {
+        console.warn(`${colors.yellow}⚠️  Warning: Audit tool had issues reading package.json: ${testResult.error}${colors.reset}`);
+        hasWarnings = true;
+      }
+    }
+  } catch (error) {
+    console.error(`${colors.red}❌ Error: Could not load audit tool: ${error.message}${colors.reset}`);
+    valid = false;
+    hasErrors = true;
+  }
+  
+  if (valid) {
+    console.log(`${colors.green}✅ Audit tool is consistent with package.json${colors.reset}`);
+  }
+  
+  return valid;
+}
+
+/**
+ * Main validation function
+ */
+function main() {
+  console.log(`${colors.bold}${colors.cyan}Dependency Validation${colors.reset}`);
+  console.log(`${colors.cyan}${'='.repeat(50)}${colors.reset}\n`);
+  
+  const packageJsonValid = validatePackageJson();
+  console.log();
+  const auditToolValid = validateAuditTool();
+  console.log();
+  
+  // Summary
+  console.log(`${colors.bold}Summary:${colors.reset}\n`);
+  
+  if (hasErrors) {
+    console.log(`${colors.red}❌ Validation failed with errors${colors.reset}`);
+    console.log(`${colors.yellow}Fix the errors above before publishing${colors.reset}\n`);
+    process.exit(1);
+  } else if (hasWarnings) {
+    console.log(`${colors.yellow}⚠️  Validation passed with warnings${colors.reset}`);
+    console.log(`${colors.yellow}Review the warnings above${colors.reset}\n`);
+    process.exit(0);
+  } else {
+    console.log(`${colors.green}✅ All dependency validations passed!${colors.reset}\n`);
+    process.exit(0);
+  }
+}
+
+// Run if called directly
+if (require.main === module) {
+  main();
+}
+
+// Export for use by other scripts
+module.exports = {
+  validatePackageJson,
+  validateAuditTool,
+  main,
+};

package/src/__tests__/helpers/__tests__/component-test-utils.test.tsx

@@ -23,7 +23,7 @@ vi.mock('../test-utils', () => ({
 describe('[helpers] componentTestPatterns', () => {
     describe('testRenders', () => {
     it('creates test that renders component without crashing', () => {
-      const TestComponent = () => <div data-testid="test-component">Test</div>;
+      const TestComponent = () => <p data-testid="test-component">Test</p>;
       const testFn = componentTestPatterns.testRenders(TestComponent);
       
       expect(typeof testFn).toBe('function');
@@ -33,7 +33,7 @@ describe('[helpers] componentTestPatterns', () => {
     });
 
     it('creates test that renders component with props', () => {
-      const TestComponent = ({ name }: { name: string }) => <div data-testid="test-component">{name}</div>;
+      const TestComponent = ({ name }: { name: string }) => <p data-testid="test-component">{name}</p>;
       const testFn = componentTestPatterns.testRenders(TestComponent, { name: 'Test Name' });
       
       expect(typeof testFn).toBe('function');

package/src/__tests__/helpers/__tests__/test-providers.test.tsx

@@ -14,11 +14,11 @@ import { TestProviderWrapper, renderWithProviders, createMockUseUnifiedAuth, use
 function TestComponent() {
   const auth = useUnifiedAuth();
   return (
-    <div>
+    <p>
       <span data-testid="user-email">{auth.user?.email}</span>
       <span data-testid="is-authenticated">{auth.isAuthenticated ? 'true' : 'false'}</span>
       <span data-testid="app-name">{auth.appName}</span>
-    </div>
+    </p>
   );
 }