Implement React Snapshot tests

[luciagirasoles]

📸 Implement React Snapshot Testing

Summary

This PR implements snapshot testing for React components using Jest and @emotion/jest, providing automated visual regression testing for the frontend codebase.

Changes Made

✅ Jest Configuration

• Added Jest configuration in package.json with support for:
  • jsdom test environment for React testing
  • CSS/SCSS module mocking with identity-obj-proxy
  • Emotion snapshot serializer for styled components
• Created jest.setup.js with Testing Library and Emotion matchers

✅ Testing Infrastructure

• Added yarn test:frontend command to run all frontend tests including snapshots
• Updated existing CI workflow to use the new test command
• Maintained compatibility with existing JavaScript tests

✅ Component Tests

• Implemented comprehensive tests for Button component including:
  • Snapshot tests for different prop combinations
  • Functional tests for user interactions and state management
  • Integration with existing SCSS styling

✅ Documentation

• Updated README.md with:
  • New test commands
  • Snapshot testing workflow explanation
  • Guidelines for updating snapshots

Testing

• All existing tests continue to pass
• New snapshot tests generate and validate correctly
• CI pipeline integrates seamlessly with existing workflow

Benefits

• Visual regression detection: Automatically catch unintended UI changes
• Component documentation: Snapshots serve as living documentation
• Faster code reviews: Clear visual diffs for component changes
• Consistent styling: Ensures Emotion styles are captured correctly

Usage

# Run all frontend tests (including snapshots)
yarn test:frontend

# Update snapshots after intentional changes
yarn test -u

# Run specific component tests
yarn test Button.test.jsx