Migrate frontend unit tests to Vitest

[LoTerence]

Story

As a developers, we should have reliable unit tests for the frontend so that we can detect bugs early and ensure that new changes don't introduce unintended consequences.

Overview

We recently migrated from CRA+Webpack to Vite, which means that our old unit tests in Jest will no longer be effective. Vite does not have out of box support for Jest. We should migrate our Jest unit tests to Vitest.

Lastly, some old unit tests are outdated because they tested old Design System UI components. We need to audit them to see if they are still relevant for testing updated UI components.

• For example, this PR about Checkbox component introduces a totally new tailwind Checkbox, but does not update the old jest tests for the old sass Checkbox, so they may fail when trying to test it.

Action Items

• Migrate all Jest unit tests to Vitest
• Audit old unit tests with updated tailwind UI components
• Make sure npm run test is fully functional
• Write documentation about how frontend unit tests work on our app

Resources

• Resources
• TDM Calculator Vitest migration: Bug: Client-Side Unit Tests are Broken tdm-calculator#2282
• 311 Data Vitest migration: add basic frontend tests with Vitest + React Testing Library 311-data#1873

[LoTerence]

Next actions:

• There is no code inside the files within the tests/__mocks__/ folder. Consider deleting or filling them
• LandingPage.test.tsx - throws warning: "Warning: An update to Dialog inside a test was not wrapped in act(...)."
• Button.test.tsx - tests the old SASS button, need to test the new tailwind button instead.
• Checkbox.test.tsx - tests the old checkbox component, need to test the new tailwind checkbox instead.
• implement test coverage: npm run test:coverage
• convert github action jest-react-test to vitest