[FEATURE] Strengthen frontend test coverage with component tests, a11y checks, and visual regression #4698
Description
Why do we need this improvement?
We currently rely mainly on:
• Basic Cypress E2E smoke tests (navigation: Home, Tools, Docs)
• Lighthouse CI for performance
But we don’t validate:
• React component behavior in isolation (e.g. filtering logic, prop rendering)
• Accessibility on real user flows (forms, filters, interactive UI)
• Visual regressions when CSS/layout changes
This means:
• UI bugs can slip through as long as the happy-path E2E still works.
• Accessibility issues are only caught manually (if at all).
• Styling or layout regressions might reach production without any automated signal.
To reach a robust and maintainable frontend, we need component-level tests, automated a11y checks, and at least a baseline of visual regression testing.
How will this change help?
• Higher confidence in UI changes:
Jest + React Testing Library tests will verify that our components (e.g. ToolsDashboard, Filter, ToolsCard) behave as expected when props/state change.
• Prevent regressions earlier:
Component tests will catch logic bugs before they reach E2E, speeding up feedback and reducing debugging time.
• Built-in accessibility safety net:
Integrating cypress-axe will automatically flag WCAG violations on each page visit in E2E tests, improving the baseline accessibility of the app.
• Protection against CSS/layout breaks:
Visual regression tooling (Storybook test runner or Percy) will highlight unintended UI changes when styles are modified.
• Better CI signal and DX:
npm test will run both build-related tests and real component tests, giving contributors a single, reliable command to validate changes locally and in CI.
Screenshots
How could it be implemented/designed?
-> Add Component Unit Tests (Jest + React Testing Library)
🚧 Breaking changes
Yes
👀 Have you checked for similar open issues?
- I checked and didn't find a similar issue
🏢 Have you read the Contributing Guidelines?
- I have read the Contributing Guidelines
Are you willing to work on this issue?
Yes I am willing to submit a PR!