CivicTechJobs
CivicTechJobs copied to clipboard
Migrate frontend unit tests to Vitest
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
- [x] Migrate all Jest unit tests to Vitest
- [x] Audit old unit tests with updated tailwind UI components
- [ ] Make sure
npm run testis fully functional - [ ] Write documentation about how frontend unit tests work on our app
Resources
- Resources
- TDM Calculator Vitest migration: https://github.com/hackforla/tdm-calculator/issues/2282
- 311 Data Vitest migration: https://github.com/hackforla/311-data/pull/1873
Next actions:
- [x] 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(...)."
- [x] 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-testto vitest
@snigbehara let's chat about where this falls on the dev timeline