Jest Snapshot Auto Updater - Hooks
Automatically updates Jest snapshots when component files are modified significantly.
Open the source and read safety notes before installing.
Schema details
- Install type
- cli
- Reading time
- 1 min
- Difficulty score
- 0
- Troubleshooting
- Yes
- Breaking changes
- No
- Trigger
- PostToolUse
- Script language
- bash
Script body
#!/usr/bin/env 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 component file that might have Jest snapshots
if [[ "$FILE_PATH" == *.jsx ]] || [[ "$FILE_PATH" == *.tsx ]] || [[ "$FILE_PATH" == *.js ]] || [[ "$FILE_PATH" == *.ts ]] || [[ "$FILE_PATH" == *.vue ]] || [[ "$FILE_PATH" == *.component.ts ]]; then
echo "📸 Jest Snapshot Management for: $(basename "$FILE_PATH")" >&2
# Initialize counters
SNAPSHOTS_UPDATED=0
TESTS_RUN=0
TESTS_PASSED=0
TESTS_FAILED=0
SNAPSHOT_FILES_FOUND=0
# Function to report snapshot operations
report_snapshot() {
local level="$1"
local message="$2"
case "$level" in
"SUCCESS")
echo "✅ SUCCESS: $message" >&2
;;
"WARNING")
echo "⚠️ WARNING: $message" >&2
;;
"ERROR")
echo "❌ ERROR: $message" >&2
;;
"INFO")
echo "ℹ️ INFO: $message" >&2
;;
"SNAPSHOT")
echo "📸 SNAPSHOT: $message" >&2
SNAPSHOTS_UPDATED=$((SNAPSHOTS_UPDATED + 1))
;;
esac
}
# Extract component information
FILE_NAME="$(basename "$FILE_PATH")"
COMPONENT_NAME="${FILE_NAME%.*}"
FILE_DIR="$(dirname "$FILE_PATH")"
# Check if this is likely a component or test file
if [[ "$FILE_NAME" == *.test.* ]] || [[ "$FILE_NAME" == *.spec.* ]]; then
echo " 🧪 Test file detected - checking for snapshot updates" >&2
else
echo " 🔧 Component file detected - looking for related tests" >&2
fi
# Check if Jest is available
if ! command -v npx &> /dev/null; then
report_snapshot "ERROR" "npx not available - cannot run Jest"
exit 1
fi
# Check if Jest is configured in the project
JEST_CONFIG_FOUND=false
if [ -f "package.json" ]; then
if grep -q '"jest"' package.json 2>/dev/null || grep -q '"@jest"' package.json 2>/dev/null; then
JEST_CONFIG_FOUND=true
echo " 📋 Jest configuration found in package.json" >&2
fi
fi
if [ -f "jest.config.js" ] || [ -f "jest.config.ts" ] || [ -f "jest.config.json" ]; then
JEST_CONFIG_FOUND=true
echo " 📋 Jest configuration file found" >&2
fi
if [ "$JEST_CONFIG_FOUND" = false ]; then
report_snapshot "WARNING" "No Jest configuration found - snapshots may not be available"
exit 0
fi
# 1. Find existing snapshot files
echo "🔍 Searching for existing snapshot files..." >&2
SNAPSHOT_DIRS=("__snapshots__" "snapshots" "__tests__/__snapshots__" "tests/__snapshots__")
SNAPSHOT_FILES=()
for dir in "${SNAPSHOT_DIRS[@]}"; do
if [ -d "$FILE_DIR/$dir" ]; then
while IFS= read -r -d '' file; do
SNAPSHOT_FILES+=("$file")
done < <(find "$FILE_DIR/$dir" -name "*.snap" -print0 2>/dev/null)
fi
done
# Also check for snapshots in test directories
while IFS= read -r -d '' file; do
SNAPSHOT_FILES+=("$file")
done < <(find . -name "*.snap" -path "*$COMPONENT_NAME*" -print0 2>/dev/null)
SNAPSHOT_FILES_FOUND=${#SNAPSHOT_FILES[@]}
if [ "$SNAPSHOT_FILES_FOUND" -gt 0 ]; then
echo " 📁 Found $SNAPSHOT_FILES_FOUND snapshot files related to this component" >&2
for snapshot in "${SNAPSHOT_FILES[@]}"; do
echo " - $(basename "$snapshot")" >&2
done
else
echo " ℹ️ No existing snapshot files found for this component" >&2
fi
# 2. Find test files for this component
echo "🧪 Locating test files..." >&2
TEST_PATTERNS=(
"${COMPONENT_NAME}.test.*"
"${COMPONENT_NAME}.spec.*"
"*${COMPONENT_NAME}*.test.*"
"*${COMPONENT_NAME}*.spec.*"
)
TEST_FILES=()
for pattern in "${TEST_PATTERNS[@]}"; do
while IFS= read -r -d '' file; do
TEST_FILES+=("$file")
done < <(find . -name "$pattern" -print0 2>/dev/null)
done
TEST_FILES_COUNT=${#TEST_FILES[@]}
if [ "$TEST_FILES_COUNT" -gt 0 ]; then
echo " 🎯 Found $TEST_FILES_COUNT test files" >&2
for test_file in "${TEST_FILES[@]}"; do
echo " - $(basename "$test_file")" >&2
done
else
echo " ⚠️ No test files found for component: $COMPONENT_NAME" >&2
report_snapshot "INFO" "Consider creating tests for better component coverage"
fi
# 3. Check if component file has been significantly modified
echo "📊 Analyzing component changes..." >&2
# Check git status to see if file was modified
if command -v git &> /dev/null && git rev-parse --git-dir > /dev/null 2>&1; then
if git status --porcelain "$FILE_PATH" | grep -q '^.M'; then
echo " 🔄 Component has been modified since last commit" >&2
# Get the diff to understand the scope of changes
LINES_CHANGED=$(git diff "$FILE_PATH" 2>/dev/null | grep -c '^[+-]' || echo "0")
if [ "$LINES_CHANGED" -gt 10 ]; then
echo " 📈 Significant changes detected ($LINES_CHANGED lines modified)" >&2
SHOULD_UPDATE_SNAPSHOTS=true
else
echo " 📝 Minor changes detected ($LINES_CHANGED lines modified)" >&2
SHOULD_UPDATE_SNAPSHOTS=false
fi
else
echo " ✅ Component file is clean (no unsaved changes)" >&2
SHOULD_UPDATE_SNAPSHOTS=false
fi
else
echo " ℹ️ Not in a git repository - assuming snapshots should be checked" >&2
SHOULD_UPDATE_SNAPSHOTS=true
fi
# 4. Run tests and update snapshots if needed
if [ "$TEST_FILES_COUNT" -gt 0 ]; then
echo "🧪 Running tests for component..." >&2
# Determine the test command
TEST_COMMAND="npm test"
if [ -f "yarn.lock" ]; then
TEST_COMMAND="yarn test"
elif [ -f "pnpm-lock.yaml" ]; then
TEST_COMMAND="pnpm test"
fi
# Create test patterns for Jest
TEST_PATTERN="$COMPONENT_NAME"
echo " 🚀 Running: $TEST_COMMAND -- --testNamePattern='$TEST_PATTERN' --coverage=false --watchAll=false" >&2
# Run tests without updating snapshots first
TEST_OUTPUT_FILE="/tmp/jest_output_$$"
if $TEST_COMMAND -- --testNamePattern="$TEST_PATTERN" --coverage=false --watchAll=false --verbose=false > "$TEST_OUTPUT_FILE" 2>&1; then
TESTS_PASSED=$(grep -c 'PASS' "$TEST_OUTPUT_FILE" 2>/dev/null || echo "0")
report_snapshot "SUCCESS" "Tests passed ($TESTS_PASSED test suites)"
# Check if snapshots are outdated
if grep -q 'snapshot.*failed' "$TEST_OUTPUT_FILE" 2>/dev/null || grep -q 'snapshot.*obsolete' "$TEST_OUTPUT_FILE" 2>/dev/null; then
echo " 📸 Outdated snapshots detected" >&2
SHOULD_UPDATE_SNAPSHOTS=true
fi
else
TESTS_FAILED=$(grep -c 'FAIL' "$TEST_OUTPUT_FILE" 2>/dev/null || echo "1")
echo " ❌ Tests failed ($TESTS_FAILED test suites) - checking for snapshot issues" >&2
# Check if failures are due to snapshot mismatches
if grep -q 'Snapshot.*differ' "$TEST_OUTPUT_FILE" 2>/dev/null; then
echo " 📸 Snapshot mismatches detected - snapshots may need updating" >&2
SHOULD_UPDATE_SNAPSHOTS=true
else
report_snapshot "ERROR" "Tests failing for reasons other than snapshots"
echo " 📝 Test output summary:" >&2
tail -10 "$TEST_OUTPUT_FILE" | while read line; do
echo " $line" >&2
done
fi
fi
rm -f "$TEST_OUTPUT_FILE"
fi
# 5. Update snapshots if needed
if [ "$SHOULD_UPDATE_SNAPSHOTS" = true ] && [ "$TEST_FILES_COUNT" -gt 0 ]; then
echo "📸 Updating Jest snapshots..." >&2
# Run with snapshot update flag
UPDATE_OUTPUT_FILE="/tmp/jest_update_$$"
if $TEST_COMMAND -- --testNamePattern="$TEST_PATTERN" --updateSnapshot --coverage=false --watchAll=false > "$UPDATE_OUTPUT_FILE" 2>&1; then
# Count updated snapshots
SNAPSHOTS_WRITTEN=$(grep -c 'snapshot.*written' "$UPDATE_OUTPUT_FILE" 2>/dev/null || echo "0")
SNAPSHOTS_UPDATED_COUNT=$(grep -c 'snapshot.*updated' "$UPDATE_OUTPUT_FILE" 2>/dev/null || echo "0")
if [ "$SNAPSHOTS_WRITTEN" -gt 0 ] || [ "$SNAPSHOTS_UPDATED_COUNT" -gt 0 ]; then
report_snapshot "SNAPSHOT" "Updated $((SNAPSHOTS_WRITTEN + SNAPSHOTS_UPDATED_COUNT)) snapshots"
# Show which snapshots were affected
grep 'snapshot.*written\|snapshot.*updated' "$UPDATE_OUTPUT_FILE" 2>/dev/null | head -5 | while read line; do
echo " $line" >&2
done
else
report_snapshot "INFO" "Snapshot update completed - no changes needed"
fi
else
report_snapshot "ERROR" "Failed to update snapshots"
echo " 📝 Update error details:" >&2
tail -5 "$UPDATE_OUTPUT_FILE" | while read line; do
echo " $line" >&2
done
fi
rm -f "$UPDATE_OUTPUT_FILE"
else
echo " ℹ️ Snapshot updates not needed at this time" >&2
fi
# 6. Clean up orphaned snapshots
echo "🧹 Checking for orphaned snapshots..." >&2
if [ "$SNAPSHOT_FILES_FOUND" -gt 0 ]; then
# This is a simplified check - in practice, you'd want more sophisticated orphan detection
POTENTIALLY_ORPHANED=0
for snapshot_file in "${SNAPSHOT_FILES[@]}"; do
SNAPSHOT_BASE=$(basename "$snapshot_file" .snap)
# Check if there's a corresponding test or component file
if ! find . -name "*${SNAPSHOT_BASE%.*}*" -type f \( -name "*.test.*" -o -name "*.spec.*" \) 2>/dev/null | head -1 | grep -q .; then
POTENTIALLY_ORPHANED=$((POTENTIALLY_ORPHANED + 1))
fi
done
if [ "$POTENTIALLY_ORPHANED" -gt 0 ]; then
report_snapshot "WARNING" "$POTENTIALLY_ORPHANED potentially orphaned snapshot files detected"
echo " 💡 Run 'npm test -- --updateSnapshot' to clean up unused snapshots" >&2
else
echo " ✅ No orphaned snapshots detected" >&2
fi
fi
# 7. Generate summary report
echo "" >&2
echo "📋 Jest Snapshot Management Summary:" >&2
echo "===================================" >&2
echo " 📄 Component: $COMPONENT_NAME" >&2
echo " 🧪 Test files found: $TEST_FILES_COUNT" >&2
echo " 📸 Snapshot files: $SNAPSHOT_FILES_FOUND" >&2
echo " ✅ Tests passed: $TESTS_PASSED" >&2
echo " ❌ Tests failed: $TESTS_FAILED" >&2
echo " 📸 Snapshots updated: $SNAPSHOTS_UPDATED" >&2
if [ "$SNAPSHOTS_UPDATED" -gt 0 ]; then
echo " 🎉 Status: SNAPSHOTS UPDATED - Review changes before committing" >&2
elif [ "$TESTS_FAILED" -gt 0 ]; then
echo " ⚠️ Status: TESTS FAILING - Fix issues before proceeding" >&2
elif [ "$TEST_FILES_COUNT" -eq 0 ]; then
echo " 📝 Status: NO TESTS - Consider adding snapshot tests" >&2
else
echo " ✅ Status: ALL GOOD - Snapshots are up to date" >&2
fi
echo "" >&2
echo "💡 Jest Snapshot Best Practices:" >&2
echo " • Review snapshot changes carefully before committing" >&2
echo " • Keep snapshots small and focused" >&2
echo " • Update snapshots only when UI changes are intentional" >&2
echo " • Use descriptive test names for better snapshot organization" >&2
echo " • Consider using 'toMatchInlineSnapshot' for small snapshots" >&2
echo " • Run 'npm test -- --updateSnapshot' to update all snapshots" >&2
# Exit with error if tests are failing for non-snapshot reasons
if [ "$TESTS_FAILED" -gt 0 ] && [ "$SNAPSHOTS_UPDATED" -eq 0 ]; then
echo "⚠️ Jest tests are failing - please review and fix issues" >&2
exit 1
fi
else
# Not a component file, exit silently
exit 0
fi
exit 0Full copyable content
{
"hooks": {
"postToolUse": {
"script": "./.claude/hooks/jest-snapshot-auto-updater.sh",
"matchers": [
"write",
"edit"
]
}
}
}About this resource
Features
- Intelligent Jest snapshot detection and updating for modified components with automatic snapshot file discovery in snapshots directories (snapshots, snapshots, tests/snapshots, tests/snapshots), test file detection using pattern matching (.test., .spec.), component-to-test mapping with component name extraction, and snapshot file association with component files
- Multi-framework support (React, Vue, Angular, vanilla JS) with framework-specific test file detection including React component detection (.jsx, .tsx), Vue component detection (.vue), Angular component detection (.component.ts), and vanilla JS test file detection (.test.js, .spec.js) with framework-agnostic snapshot management
- Snapshot change analysis and impact assessment with git diff analysis to detect significant changes using git diff with line count analysis, configurable change threshold (default 10 lines, customizable for major changes), change scope detection (minor vs significant changes), and snapshot update decision logic based on change analysis
- Test suite validation before snapshot updates with test execution using npm/yarn/pnpm test commands, test failure detection and analysis, snapshot mismatch detection from test output, test result parsing (PASS/FAIL counts), and snapshot update decision based on test results
- Orphaned snapshot cleanup and maintenance with automatic orphaned snapshot detection by checking for corresponding test files, snapshot file association validation, orphaned snapshot reporting with counts, and cleanup recommendations with manual cleanup instructions
- Interactive confirmation for significant snapshot changes with change threshold configuration for triggering confirmations, significant change detection (configurable line count threshold), snapshot change impact assessment, and user-friendly change reporting with actionable recommendations
- Test coverage analysis and reporting with coverage metrics including test file count, snapshot file count, test pass/fail counts, snapshot update counts, and comprehensive summary reports with status indicators (SNAPSHOTS UPDATED, TESTS FAILING, NO TESTS, ALL GOOD)
- Parallel test execution optimization for large codebases with --maxWorkers configuration for controlling parallel test execution, resource management for large test suites, test execution performance optimization, and CI/CD-friendly test execution with stable parallel execution
Use Cases
- React/Vue component development with automated snapshot testing automatically updating snapshots when components are modified, detecting snapshot mismatches, and ensuring snapshot tests stay in sync with component changes for efficient component development workflows
- UI regression testing and change detection in component libraries automatically detecting UI changes, updating snapshots for intentional changes, and identifying unexpected UI regressions through snapshot comparison for reliable UI regression testing
- Continuous integration with automated snapshot validation automatically running snapshot tests in CI pipelines, detecting snapshot mismatches, and updating snapshots when needed for consistent CI/CD workflows with snapshot management
- Frontend refactoring projects with comprehensive test coverage automatically updating snapshots during refactoring, ensuring snapshot tests remain valid after refactoring, and detecting breaking changes through snapshot comparison for safe frontend refactoring
- Team collaboration with consistent snapshot management workflows automatically managing snapshots across team members, ensuring snapshot consistency, and providing clear snapshot update reports for collaborative development with snapshot testing
- Development workflow integration seamlessly integrating Jest snapshot management into development workflows without manual snapshot update steps or separate snapshot management tools
Installation
- Create hooks directory: mkdir -p .claude/hooks
- Create hook file: touch .claude/hooks/jest-snapshot-auto-updater.sh
- Make executable: chmod +x .claude/hooks/jest-snapshot-auto-updater.sh
- Add configuration from Hook Configuration section above to .claude/settings.json or ~/.claude/settings.json
- Alternative: Use the interactive /hooks command in Claude Code
Config paths
- Local (not committed):
.claude/settings.local.json - User settings (global):
~/.claude/settings.json - Project-wide (committed):
.claude/settings.json
Requirements
- Claude Code CLI installed
- Project directory initialized
- Bash shell available
- Jest installed (npm/yarn/pnpm)
- Git (optional, for change detection)
- Node.js 18+ and npm/yarn/pnpm (for running Jest tests and snapshot updates)
Hook Configuration
{
"hooks": {
"postToolUse": {
"script": "./.claude/hooks/jest-snapshot-auto-updater.sh",
"matchers": ["write", "edit"]
}
}
}
Hook Script
#!/usr/bin/env 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 component file that might have Jest snapshots
if [[ "$FILE_PATH" == *.jsx ]] || [[ "$FILE_PATH" == *.tsx ]] || [[ "$FILE_PATH" == *.js ]] || [[ "$FILE_PATH" == *.ts ]] || [[ "$FILE_PATH" == *.vue ]] || [[ "$FILE_PATH" == *.component.ts ]]; then
echo "📸 Jest Snapshot Management for: $(basename "$FILE_PATH")" >&2
# Initialize counters
SNAPSHOTS_UPDATED=0
TESTS_RUN=0
TESTS_PASSED=0
TESTS_FAILED=0
SNAPSHOT_FILES_FOUND=0
# Function to report snapshot operations
report_snapshot() {
local level="$1"
local message="$2"
case "$level" in
"SUCCESS")
echo "✅ SUCCESS: $message" >&2
;;
"WARNING")
echo "⚠️ WARNING: $message" >&2
;;
"ERROR")
echo "❌ ERROR: $message" >&2
;;
"INFO")
echo "ℹ️ INFO: $message" >&2
;;
"SNAPSHOT")
echo "📸 SNAPSHOT: $message" >&2
SNAPSHOTS_UPDATED=$((SNAPSHOTS_UPDATED + 1))
;;
esac
}
# Extract component information
FILE_NAME="$(basename "$FILE_PATH")"
COMPONENT_NAME="${FILE_NAME%.*}"
FILE_DIR="$(dirname "$FILE_PATH")"
# Check if this is likely a component or test file
if [[ "$FILE_NAME" == *.test.* ]] || [[ "$FILE_NAME" == *.spec.* ]]; then
echo " 🧪 Test file detected - checking for snapshot updates" >&2
else
echo " 🔧 Component file detected - looking for related tests" >&2
fi
# Check if Jest is available
if ! command -v npx &> /dev/null; then
report_snapshot "ERROR" "npx not available - cannot run Jest"
exit 1
fi
# Check if Jest is configured in the project
JEST_CONFIG_FOUND=false
if [ -f "package.json" ]; then
if grep -q '"jest"' package.json 2>/dev/null || grep -q '"@jest"' package.json 2>/dev/null; then
JEST_CONFIG_FOUND=true
echo " 📋 Jest configuration found in package.json" >&2
fi
fi
if [ -f "jest.config.js" ] || [ -f "jest.config.ts" ] || [ -f "jest.config.json" ]; then
JEST_CONFIG_FOUND=true
echo " 📋 Jest configuration file found" >&2
fi
if [ "$JEST_CONFIG_FOUND" = false ]; then
report_snapshot "WARNING" "No Jest configuration found - snapshots may not be available"
exit 0
fi
# 1. Find existing snapshot files
echo "🔍 Searching for existing snapshot files..." >&2
SNAPSHOT_DIRS=("__snapshots__" "snapshots" "__tests__/__snapshots__" "tests/__snapshots__")
SNAPSHOT_FILES=()
for dir in "${SNAPSHOT_DIRS[@]}"; do
if [ -d "$FILE_DIR/$dir" ]; then
while IFS= read -r -d '' file; do
SNAPSHOT_FILES+=("$file")
done < <(find "$FILE_DIR/$dir" -name "*.snap" -print0 2>/dev/null)
fi
done
# Also check for snapshots in test directories
while IFS= read -r -d '' file; do
SNAPSHOT_FILES+=("$file")
done < <(find . -name "*.snap" -path "*$COMPONENT_NAME*" -print0 2>/dev/null)
SNAPSHOT_FILES_FOUND=${#SNAPSHOT_FILES[@]}
if [ "$SNAPSHOT_FILES_FOUND" -gt 0 ]; then
echo " 📁 Found $SNAPSHOT_FILES_FOUND snapshot files related to this component" >&2
for snapshot in "${SNAPSHOT_FILES[@]}"; do
echo " - $(basename "$snapshot")" >&2
done
else
echo " ℹ️ No existing snapshot files found for this component" >&2
fi
# 2. Find test files for this component
echo "🧪 Locating test files..." >&2
TEST_PATTERNS=(
"${COMPONENT_NAME}.test.*"
"${COMPONENT_NAME}.spec.*"
"*${COMPONENT_NAME}*.test.*"
"*${COMPONENT_NAME}*.spec.*"
)
TEST_FILES=()
for pattern in "${TEST_PATTERNS[@]}"; do
while IFS= read -r -d '' file; do
TEST_FILES+=("$file")
done < <(find . -name "$pattern" -print0 2>/dev/null)
done
TEST_FILES_COUNT=${#TEST_FILES[@]}
if [ "$TEST_FILES_COUNT" -gt 0 ]; then
echo " 🎯 Found $TEST_FILES_COUNT test files" >&2
for test_file in "${TEST_FILES[@]}"; do
echo " - $(basename "$test_file")" >&2
done
else
echo " ⚠️ No test files found for component: $COMPONENT_NAME" >&2
report_snapshot "INFO" "Consider creating tests for better component coverage"
fi
# 3. Check if component file has been significantly modified
echo "📊 Analyzing component changes..." >&2
# Check git status to see if file was modified
if command -v git &> /dev/null && git rev-parse --git-dir > /dev/null 2>&1; then
if git status --porcelain "$FILE_PATH" | grep -q '^.M'; then
echo " 🔄 Component has been modified since last commit" >&2
# Get the diff to understand the scope of changes
LINES_CHANGED=$(git diff "$FILE_PATH" 2>/dev/null | grep -c '^[+-]' || echo "0")
if [ "$LINES_CHANGED" -gt 10 ]; then
echo " 📈 Significant changes detected ($LINES_CHANGED lines modified)" >&2
SHOULD_UPDATE_SNAPSHOTS=true
else
echo " 📝 Minor changes detected ($LINES_CHANGED lines modified)" >&2
SHOULD_UPDATE_SNAPSHOTS=false
fi
else
echo " ✅ Component file is clean (no unsaved changes)" >&2
SHOULD_UPDATE_SNAPSHOTS=false
fi
else
echo " ℹ️ Not in a git repository - assuming snapshots should be checked" >&2
SHOULD_UPDATE_SNAPSHOTS=true
fi
# 4. Run tests and update snapshots if needed
if [ "$TEST_FILES_COUNT" -gt 0 ]; then
echo "🧪 Running tests for component..." >&2
# Determine the test command
TEST_COMMAND="npm test"
if [ -f "yarn.lock" ]; then
TEST_COMMAND="yarn test"
elif [ -f "pnpm-lock.yaml" ]; then
TEST_COMMAND="pnpm test"
fi
# Create test patterns for Jest
TEST_PATTERN="$COMPONENT_NAME"
echo " 🚀 Running: $TEST_COMMAND -- --testNamePattern='$TEST_PATTERN' --coverage=false --watchAll=false" >&2
# Run tests without updating snapshots first
TEST_OUTPUT_FILE="/tmp/jest_output_$$"
if $TEST_COMMAND -- --testNamePattern="$TEST_PATTERN" --coverage=false --watchAll=false --verbose=false > "$TEST_OUTPUT_FILE" 2>&1; then
TESTS_PASSED=$(grep -c 'PASS' "$TEST_OUTPUT_FILE" 2>/dev/null || echo "0")
report_snapshot "SUCCESS" "Tests passed ($TESTS_PASSED test suites)"
# Check if snapshots are outdated
if grep -q 'snapshot.*failed' "$TEST_OUTPUT_FILE" 2>/dev/null || grep -q 'snapshot.*obsolete' "$TEST_OUTPUT_FILE" 2>/dev/null; then
echo " 📸 Outdated snapshots detected" >&2
SHOULD_UPDATE_SNAPSHOTS=true
fi
else
TESTS_FAILED=$(grep -c 'FAIL' "$TEST_OUTPUT_FILE" 2>/dev/null || echo "1")
echo " ❌ Tests failed ($TESTS_FAILED test suites) - checking for snapshot issues" >&2
# Check if failures are due to snapshot mismatches
if grep -q 'Snapshot.*differ' "$TEST_OUTPUT_FILE" 2>/dev/null; then
echo " 📸 Snapshot mismatches detected - snapshots may need updating" >&2
SHOULD_UPDATE_SNAPSHOTS=true
else
report_snapshot "ERROR" "Tests failing for reasons other than snapshots"
echo " 📝 Test output summary:" >&2
tail -10 "$TEST_OUTPUT_FILE" | while read line; do
echo " $line" >&2
done
fi
fi
rm -f "$TEST_OUTPUT_FILE"
fi
# 5. Update snapshots if needed
if [ "$SHOULD_UPDATE_SNAPSHOTS" = true ] && [ "$TEST_FILES_COUNT" -gt 0 ]; then
echo "📸 Updating Jest snapshots..." >&2
# Run with snapshot update flag
UPDATE_OUTPUT_FILE="/tmp/jest_update_$$"
if $TEST_COMMAND -- --testNamePattern="$TEST_PATTERN" --updateSnapshot --coverage=false --watchAll=false > "$UPDATE_OUTPUT_FILE" 2>&1; then
# Count updated snapshots
SNAPSHOTS_WRITTEN=$(grep -c 'snapshot.*written' "$UPDATE_OUTPUT_FILE" 2>/dev/null || echo "0")
SNAPSHOTS_UPDATED_COUNT=$(grep -c 'snapshot.*updated' "$UPDATE_OUTPUT_FILE" 2>/dev/null || echo "0")
if [ "$SNAPSHOTS_WRITTEN" -gt 0 ] || [ "$SNAPSHOTS_UPDATED_COUNT" -gt 0 ]; then
report_snapshot "SNAPSHOT" "Updated $((SNAPSHOTS_WRITTEN + SNAPSHOTS_UPDATED_COUNT)) snapshots"
# Show which snapshots were affected
grep 'snapshot.*written\|snapshot.*updated' "$UPDATE_OUTPUT_FILE" 2>/dev/null | head -5 | while read line; do
echo " $line" >&2
done
else
report_snapshot "INFO" "Snapshot update completed - no changes needed"
fi
else
report_snapshot "ERROR" "Failed to update snapshots"
echo " 📝 Update error details:" >&2
tail -5 "$UPDATE_OUTPUT_FILE" | while read line; do
echo " $line" >&2
done
fi
rm -f "$UPDATE_OUTPUT_FILE"
else
echo " ℹ️ Snapshot updates not needed at this time" >&2
fi
# 6. Clean up orphaned snapshots
echo "🧹 Checking for orphaned snapshots..." >&2
if [ "$SNAPSHOT_FILES_FOUND" -gt 0 ]; then
# This is a simplified check - in practice, you'd want more sophisticated orphan detection
POTENTIALLY_ORPHANED=0
for snapshot_file in "${SNAPSHOT_FILES[@]}"; do
SNAPSHOT_BASE=$(basename "$snapshot_file" .snap)
# Check if there's a corresponding test or component file
if ! find . -name "*${SNAPSHOT_BASE%.*}*" -type f \( -name "*.test.*" -o -name "*.spec.*" \) 2>/dev/null | head -1 | grep -q .; then
POTENTIALLY_ORPHANED=$((POTENTIALLY_ORPHANED + 1))
fi
done
if [ "$POTENTIALLY_ORPHANED" -gt 0 ]; then
report_snapshot "WARNING" "$POTENTIALLY_ORPHANED potentially orphaned snapshot files detected"
echo " 💡 Run 'npm test -- --updateSnapshot' to clean up unused snapshots" >&2
else
echo " ✅ No orphaned snapshots detected" >&2
fi
fi
# 7. Generate summary report
echo "" >&2
echo "📋 Jest Snapshot Management Summary:" >&2
echo "===================================" >&2
echo " 📄 Component: $COMPONENT_NAME" >&2
echo " 🧪 Test files found: $TEST_FILES_COUNT" >&2
echo " 📸 Snapshot files: $SNAPSHOT_FILES_FOUND" >&2
echo " ✅ Tests passed: $TESTS_PASSED" >&2
echo " ❌ Tests failed: $TESTS_FAILED" >&2
echo " 📸 Snapshots updated: $SNAPSHOTS_UPDATED" >&2
if [ "$SNAPSHOTS_UPDATED" -gt 0 ]; then
echo " 🎉 Status: SNAPSHOTS UPDATED - Review changes before committing" >&2
elif [ "$TESTS_FAILED" -gt 0 ]; then
echo " ⚠️ Status: TESTS FAILING - Fix issues before proceeding" >&2
elif [ "$TEST_FILES_COUNT" -eq 0 ]; then
echo " 📝 Status: NO TESTS - Consider adding snapshot tests" >&2
else
echo " ✅ Status: ALL GOOD - Snapshots are up to date" >&2
fi
echo "" >&2
echo "💡 Jest Snapshot Best Practices:" >&2
echo " • Review snapshot changes carefully before committing" >&2
echo " • Keep snapshots small and focused" >&2
echo " • Update snapshots only when UI changes are intentional" >&2
echo " • Use descriptive test names for better snapshot organization" >&2
echo " • Consider using 'toMatchInlineSnapshot' for small snapshots" >&2
echo " • Run 'npm test -- --updateSnapshot' to update all snapshots" >&2
# Exit with error if tests are failing for non-snapshot reasons
if [ "$TESTS_FAILED" -gt 0 ] && [ "$SNAPSHOTS_UPDATED" -eq 0 ]; then
echo "⚠️ Jest tests are failing - please review and fix issues" >&2
exit 1
fi
else
# Not a component file, exit silently
exit 0
fi
exit 0
Examples
Jest Snapshot Auto Updater Hook Script
Complete hook script that automatically updates Jest snapshots for modified components
#!/usr/bin/env bash
INPUT=$(cat)
FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.path // ""')
if [ -z "$FILE_PATH" ]; then
exit 0
fi
if [[ "$FILE_PATH" == *.jsx ]] || [[ "$FILE_PATH" == *.tsx ]]; then
echo "📸 Jest Snapshot Management for: $(basename "$FILE_PATH")" >&2
COMPONENT_NAME="${FILE_PATH%.*}"
TEST_COMMAND="npm test"
if [ -f "yarn.lock" ]; then
TEST_COMMAND="yarn test"
elif [ -f "pnpm-lock.yaml" ]; then
TEST_COMMAND="pnpm test"
fi
if $TEST_COMMAND -- --testPathPattern="$COMPONENT_NAME" --updateSnapshot --watchAll=false > /dev/null 2>&1; then
echo "✅ Snapshots updated successfully" >&2
else
echo "❌ Snapshot update failed" >&2
exit 1
fi
fi
exit 0
Hook Configuration
Complete hook configuration for .claude/settings.json to enable Jest snapshot auto-updating
{
"hooks": {
"postToolUse": {
"script": "./.claude/hooks/jest-snapshot-auto-updater.sh",
"matchers": ["write", "edit"]
}
}
}
Change Analysis with Git Diff
Enhanced hook script for analyzing component changes using git diff with configurable threshold
#!/usr/bin/env bash
INPUT=$(cat)
FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.path // ""')
if command -v git &> /dev/null && git rev-parse --git-dir > /dev/null 2>&1; then
if git status --porcelain "$FILE_PATH" | grep -q '^.M'; then
LINES_CHANGED=$(git diff "$FILE_PATH" 2>/dev/null | grep -c '^[+-]' || echo "0")
if [ "$LINES_CHANGED" -gt 50 ]; then
echo "📈 Significant changes detected ($LINES_CHANGED lines modified)" >&2
SHOULD_UPDATE_SNAPSHOTS=true
else
echo "📝 Minor changes detected ($LINES_CHANGED lines modified)" >&2
SHOULD_UPDATE_SNAPSHOTS=false
fi
fi
fi
exit 0
Test Execution and Snapshot Update
Enhanced hook script for running tests and updating snapshots with parallel execution optimization
#!/usr/bin/env bash
INPUT=$(cat)
FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.path // ""')
COMPONENT_NAME="${FILE_PATH%.*}"
TEST_COMMAND="npm test"
if [ -f "yarn.lock" ]; then
TEST_COMMAND="yarn test"
elif [ -f "pnpm-lock.yaml" ]; then
TEST_COMMAND="pnpm test"
fi
TEST_OUTPUT_FILE="/tmp/jest_output_$$"
if $TEST_COMMAND -- --testPathPattern="$COMPONENT_NAME" --maxWorkers=2 --watchAll=false > "$TEST_OUTPUT_FILE" 2>&1; then
if grep -q 'snapshot.*differ' "$TEST_OUTPUT_FILE" 2>/dev/null; then
echo "📸 Snapshot mismatches detected - updating snapshots" >&2
$TEST_COMMAND -- --testPathPattern="$COMPONENT_NAME" --updateSnapshot --maxWorkers=2 --watchAll=false
fi
else
echo "❌ Tests failed - checking for snapshot issues" >&2
fi
rm -f "$TEST_OUTPUT_FILE"
exit 0
Orphaned Snapshot Detection
Enhanced hook script for detecting orphaned snapshot files with test file association validation
#!/usr/bin/env bash
INPUT=$(cat)
FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.path // ""')
FILE_DIR="$(dirname "$FILE_PATH")"
SNAPSHOT_DIRS=("__snapshots__" "snapshots" "__tests__/__snapshots__" "tests/__snapshots__")
SNAPSHOT_FILES=()
for dir in "${SNAPSHOT_DIRS[@]}"; do
if [ -d "$FILE_DIR/$dir" ]; then
while IFS= read -r -d '' file; do
SNAPSHOT_FILES+=("$file")
done < <(find "$FILE_DIR/$dir" -name "*.snap" -print0 2>/dev/null)
fi
done
if [ ${#SNAPSHOT_FILES[@]} -gt 0 ]; then
echo "📁 Found ${#SNAPSHOT_FILES[@]} snapshot files" >&2
for snapshot in "${SNAPSHOT_FILES[@]}"; do
SNAPSHOT_BASE=$(basename "$snapshot" .snap)
if ! find . -name "*${SNAPSHOT_BASE%.*}*" -type f \( -name "*.test.*" -o -name "*.spec.*" \) 2>/dev/null | head -1 | grep -q .; then
echo "⚠️ Orphaned snapshot detected: $(basename "$snapshot")" >&2
fi
done
fi
exit 0
Troubleshooting
Hook runs tests for every file change even non-test files
Detection too broad (matches all .js/.ts). Add matchers: 'matchers': ['write:/*.{test,spec}.{js,ts,jsx,tsx}', 'edit:/*.{test,spec}.{js,ts,jsx,tsx}'] to trigger only on test files. Verify file path patterns match test files. Test with various file types.
Jest runs entire test suite instead of component-specific tests
testNamePattern with component name unreliable. Use --testPathPattern: '$TEST_COMMAND -- --testPathPattern="$COMPONENT_NAME" --watchAll=false'. Targets files not test descriptions. Verify component name extraction. Test with various component names.
Parallel test execution with --maxWorkers causes race conditions
No worker limit causes resource exhaustion. Add '--maxWorkers=2': '$TEST_COMMAND -- --testPathPattern="$TEST_PATTERN" --maxWorkers=2 --watchAll=false' for stable CI execution. Verify worker count. Test with various test suite sizes.
Snapshot update creates duplicate snapshot files after renaming
Old snapshots persist when components renamed. Run cleanup: 'npm test -- --updateSnapshot --clearCache' deleting unused snapshots. Or manually remove from snapshots directory. Verify snapshot cleanup. Test with component renaming.
git diff threshold (10 lines) triggers updates for minor changes
Conservative threshold causes excessive updates. Increase: 'if [ "$LINES_CHANGED" -gt 50 ]; then' for major changes only. Or check specific files: test if modified file is component. Verify threshold configuration. Test with various change sizes.
Snapshot update fails with 'Cannot find module' errors
Jest cache may be stale. Clear cache: 'npm test -- --clearCache'. Verify Jest configuration. Check module resolution paths. Ensure all dependencies installed. Verify test environment setup.
Tests pass but snapshots are not updated automatically
Hook may not detect snapshot mismatches. Check test output for snapshot-related messages. Verify --updateSnapshot flag is passed. Check Jest configuration for snapshot settings. Verify snapshot file permissions. Test with explicit snapshot updates.
Orphaned snapshot detection shows false positives
Pattern matching may be too strict. Adjust snapshot base name extraction. Verify test file naming conventions. Check for test files in different directories. Verify snapshot file associations. Test with various project structures.
- Features
- Use Cases
- Installation
- Config paths
- Requirements
- Hook Configuration
- Hook Script
- Examples
- Jest Snapshot Auto Updater Hook Script
- Hook Configuration
- Change Analysis with Git Diff
- Test Execution and Snapshot Update
- Orphaned Snapshot Detection
- Troubleshooting
- Hook runs tests for every file change even non-test files
- Jest runs entire test suite instead of component-specific tests
Source citations
Signals
Loading live community signals…
A short, calm digest of reviewed Claude resources. Unsubscribe any time.