Loading...
Automatically creates or updates test files when React components are modified
{
"hookConfig": {
"hooks": {
"postToolUse": {
"script": "./.claude/hooks/react-component-test-generator.sh",
"matchers": [
"write",
"edit"
]
}
}
},
"scriptContent": "#!/bin/bash\n\n# Read the tool input from stdin\nINPUT=$(cat)\nTOOL_NAME=$(echo \"$INPUT\" | jq -r '.tool_name')\nFILE_PATH=$(echo \"$INPUT\" | jq -r '.tool_input.file_path // .tool_input.path // \"\"')\n\nif [ -z \"$FILE_PATH\" ]; then\n exit 0\nfi\n\n# Check if this is a React component file (but not a test file)\nif [[ \"$FILE_PATH\" == *.jsx ]] || [[ \"$FILE_PATH\" == *.tsx ]]; then\n # Skip if this is already a test file\n if [[ \"$FILE_PATH\" == *.test.* ]] || [[ \"$FILE_PATH\" == *.spec.* ]]; then\n exit 0\n fi\n \n echo \"⚛️ React Component Test Generator - Processing component...\"\n echo \"📄 Component: $FILE_PATH\"\n \n # Extract component info\n COMPONENT_DIR=$(dirname \"$FILE_PATH\")\n COMPONENT_BASENAME=$(basename \"$FILE_PATH\")\n COMPONENT_NAME=$(basename \"${FILE_PATH%.*}\")\n COMPONENT_EXT=\"${FILE_PATH##*.}\"\n \n # Determine test file path\n if [[ \"$COMPONENT_EXT\" == \"tsx\" ]]; then\n TEST_FILE=\"${COMPONENT_DIR}/${COMPONENT_NAME}.test.tsx\"\n else\n TEST_FILE=\"${COMPONENT_DIR}/${COMPONENT_NAME}.test.jsx\"\n fi\n \n # Check if test file already exists\n if [ -f \"$TEST_FILE\" ]; then\n echo \"ℹ️ Test file already exists: $TEST_FILE\"\n echo \"💡 Consider updating tests to match component changes\"\n else\n echo \"🧪 Generating test file: $TEST_FILE\"\n \n # Create test file content\n cat > \"$TEST_FILE\" << EOF\nimport { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport $COMPONENT_NAME from './$COMPONENT_BASENAME';\n\ndescribe('$COMPONENT_NAME', () => {\n it('renders without crashing', () => {\n render(<$COMPONENT_NAME />);\n });\n\n it('displays expected content', () => {\n render(<$COMPONENT_NAME />);\n // Add assertions here\n // expect(screen.getByText('expected text')).toBeInTheDocument();\n });\n\n // Add more component-specific tests here\n // Example: testing props, user interactions, etc.\n // \n // it('handles user interactions', async () => {\n // const user = userEvent.setup();\n // render(<$COMPONENT_NAME />);\n // // await user.click(screen.getByRole('button'));\n // // expect(...);\n // });\n});\nEOF\n \n if [ $? -eq 0 ]; then\n echo \"✅ Test file created successfully!\"\n echo \"📝 Test file: $TEST_FILE\"\n else\n echo \"❌ Failed to create test file\"\n fi\n fi\n \n # Additional suggestions based on component analysis\n echo \"\"\n echo \"🔍 Component Analysis:\"\n \n if [ -f \"$FILE_PATH\" ]; then\n # Check for props interface/type\n if grep -q \"interface.*Props\\|type.*Props\" \"$FILE_PATH\"; then\n echo \" • 💡 Props interface detected - consider testing different prop combinations\"\n fi\n \n # Check for hooks usage\n if grep -q \"useState\\|useEffect\\|useContext\" \"$FILE_PATH\"; then\n echo \" • 💡 React hooks detected - consider testing state changes and side effects\"\n fi\n \n # Check for event handlers\n if grep -q \"onClick\\|onChange\\|onSubmit\" \"$FILE_PATH\"; then\n echo \" • 💡 Event handlers detected - consider testing user interactions\"\n fi\n \n # Check for conditional rendering\n if grep -q \"&&\\|?.*:\" \"$FILE_PATH\"; then\n echo \" • 💡 Conditional rendering detected - test different rendering scenarios\"\n fi\n fi\n \n echo \"\"\n echo \"💡 Testing Best Practices:\"\n echo \" • Test component behavior, not implementation details\"\n echo \" • Use accessible queries (getByRole, getByLabelText)\"\n echo \" • Test user interactions with userEvent\"\n echo \" • Mock external dependencies and API calls\"\n echo \" • Test edge cases and error states\"\n \n echo \"\"\n echo \"🎯 Test generation complete!\"\n \nelse\n echo \"ℹ️ File is not a React component: $FILE_PATH\"\nfi\n\nexit 0"
}.claude/hooks/~/.claude/hooks/{
"hooks": {
"postToolUse": {
"script": "./.claude/hooks/react-component-test-generator.sh",
"matchers": [
"write",
"edit"
]
}
}
}#!/bin/bash
# Read the tool input from stdin
INPUT=$(cat)
TOOL_NAME=$(echo "$INPUT" | jq -r '.tool_name')
FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.path // ""')
if [ -z "$FILE_PATH" ]; then
exit 0
fi
# Check if this is a React component file (but not a test file)
if [[ "$FILE_PATH" == *.jsx ]] || [[ "$FILE_PATH" == *.tsx ]]; then
# Skip if this is already a test file
if [[ "$FILE_PATH" == *.test.* ]] || [[ "$FILE_PATH" == *.spec.* ]]; then
exit 0
fi
echo "⚛️ React Component Test Generator - Processing component..."
echo "📄 Component: $FILE_PATH"
# Extract component info
COMPONENT_DIR=$(dirname "$FILE_PATH")
COMPONENT_BASENAME=$(basename "$FILE_PATH")
COMPONENT_NAME=$(basename "${FILE_PATH%.*}")
COMPONENT_EXT="${FILE_PATH##*.}"
# Determine test file path
if [[ "$COMPONENT_EXT" == "tsx" ]]; then
TEST_FILE="${COMPONENT_DIR}/${COMPONENT_NAME}.test.tsx"
else
TEST_FILE="${COMPONENT_DIR}/${COMPONENT_NAME}.test.jsx"
fi
# Check if test file already exists
if [ -f "$TEST_FILE" ]; then
echo "ℹ️ Test file already exists: $TEST_FILE"
echo "💡 Consider updating tests to match component changes"
else
echo "🧪 Generating test file: $TEST_FILE"
# Create test file content
cat > "$TEST_FILE" << EOF
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import $COMPONENT_NAME from './$COMPONENT_BASENAME';
describe('$COMPONENT_NAME', () => {
it('renders without crashing', () => {
render(<$COMPONENT_NAME />);
});
it('displays expected content', () => {
render(<$COMPONENT_NAME />);
// Add assertions here
// expect(screen.getByText('expected text')).toBeInTheDocument();
});
// Add more component-specific tests here
// Example: testing props, user interactions, etc.
//
// it('handles user interactions', async () => {
// const user = userEvent.setup();
// render(<$COMPONENT_NAME />);
// // await user.click(screen.getByRole('button'));
// // expect(...);
// });
});
EOF
if [ $? -eq 0 ]; then
echo "✅ Test file created successfully!"
echo "📝 Test file: $TEST_FILE"
else
echo "❌ Failed to create test file"
fi
fi
# Additional suggestions based on component analysis
echo ""
echo "🔍 Component Analysis:"
if [ -f "$FILE_PATH" ]; then
# Check for props interface/type
if grep -q "interface.*Props\|type.*Props" "$FILE_PATH"; then
echo " • 💡 Props interface detected - consider testing different prop combinations"
fi
# Check for hooks usage
if grep -q "useState\|useEffect\|useContext" "$FILE_PATH"; then
echo " • 💡 React hooks detected - consider testing state changes and side effects"
fi
# Check for event handlers
if grep -q "onClick\|onChange\|onSubmit" "$FILE_PATH"; then
echo " • 💡 Event handlers detected - consider testing user interactions"
fi
# Check for conditional rendering
if grep -q "&&\|?.*:" "$FILE_PATH"; then
echo " • 💡 Conditional rendering detected - test different rendering scenarios"
fi
fi
echo ""
echo "💡 Testing Best Practices:"
echo " • Test component behavior, not implementation details"
echo " • Use accessible queries (getByRole, getByLabelText)"
echo " • Test user interactions with userEvent"
echo " • Mock external dependencies and API calls"
echo " • Test edge cases and error states"
echo ""
echo "🎯 Test generation complete!"
else
echo "ℹ️ File is not a React component: $FILE_PATH"
fi
exit 0Generated tests import components incorrectly using default export
Hook assumes default exports. For named exports, modify the template to use: import { ComponentName } from './file'. Check component export pattern before generation or add detection logic for export type.
Test file created but component requires props causing render failures
Base template uses empty props <Component />. Extract props interface from component file using grep and generate mock props: const mockProps = { required: 'value' }; before render() call in template.
Generated imports fail when @testing-library not installed in project
Hook doesn't verify testing dependencies. Add package.json check: grep -q '@testing-library/react' package.json || { echo 'Install testing libraries first'; exit 1; } before generating test files.
Test generation races with file write causing empty component reads
PostToolUse triggers immediately after tool but writes may be buffered. Add validation: [ -s "$FILE_PATH" ] to check file has content before reading. Use sleep 0.05 if race conditions persist in analysis section.
Cat heredoc syntax fails when component name contains special chars
Template uses unquoted $COMPONENT_NAME in heredoc. Escape special characters: SAFE_NAME=${COMPONENT_NAME//[^a-zA-Z0-9_]/} or use single quotes: cat > "$TEST_FILE" <<'EOF' to prevent variable expansion issues.
Loading reviews...
Join our community of Claude power users. No spam, unsubscribe anytime.
Automated accessibility testing and compliance checking for web applications following WCAG guidelines
Automatically generates or updates API documentation when endpoint files are modified
Automatically formats code files after Claude writes or edits them using Prettier, Black, or other formatters