Migration of frontend tests from Jest to Vitest#820
Conversation
regulartim
left a comment
There was a problem hiding this comment.
Hey @R1sh0bh-1 ! Can you please also update the CI to use vitest? Also, when I run npm test in the frontend folder, the result is:
Test Files 10 failed | 3 passed (13)
Tests 23 passed (23)
Start at 14:44:12
Duration 1.55s (transform 457ms, setup 751ms, import 530ms, tests 528ms, environment 6.60s)
Am I doing something wrong?
| "devDependencies": { | ||
| "@babel/preset-env": "^7.21.4", | ||
| "@babel/preset-react": "^7.22.5", | ||
| "@testing-library/jest-dom": "^6.4.8", | ||
| "@testing-library/jest-dom": "^6.9.1", | ||
| "@testing-library/react": "^12.1.5", | ||
| "@testing-library/react-hooks": "^8.0.1", | ||
| "@testing-library/user-event": "^14.0.0", | ||
| "@types/jest": "^30.0.0", | ||
| "@vitejs/plugin-react": "^4.7.0", |
There was a problem hiding this comment.
Please check if we really need:
- @babel/preset-env
- @babel/preset-react
- @types/jest
frontend/vitest.setup.js
Outdated
| // Polyfill for legacy Jest tests using jest.fn(), jest.mock(), etc. | ||
| global.jest = vi; |
There was a problem hiding this comment.
Also, is this polyfill really necessary? AS far as I can see all test files were already updated from jest.mock/jest.fn to vi.mock/vi.fn.
|
@regulartim did you ran npm install after checking out my branch because when i ran it locally all test were passing could you please run that and try again? |
Yes, I did. |
|
@regulartim thanks for the logs! I was able to reproduce the issue locally by doing a fresh install. The Root Cause: It turns out there is a version conflict between zustand (v4.5.2) and @certego/certego-ui. The UI library uses a deprecated pattern (create.bind or similar middleware usage) which causes the TypeError: Cannot read properties of undefined (reading 'bind') error in the test environment. I have updated vitest.setup.js to mock zustand significantly. This mock ensures that both Default and Named exports work correctly for the UI library, acting as a compatibility layer. I verified this fix locally |
|
I still have the problem. I am on Node.js 25 and I think it has something to do with that. Which version are you on? |
|
It seems like current versions of Node if (typeof globalThis.localStorage !== 'undefined' && typeof globalThis.localStorage.getItem !== 'function') {
const store = {};
globalThis.localStorage = {
getItem: (key) => store[key] ?? null,
setItem: (key, value) => { store[key] = String(value); },
removeItem: (key) => { delete store[key]; },
clear: () => { Object.keys(store).forEach(k => delete store[k]); },
get length() { return Object.keys(store).length; },
key: (i) => Object.keys(store)[i] ?? null,
};
}I would be happy if you could find a better solution, but if nothing else works, please feel free to add this. |
|
@regulartim,I was on v24.6.0 earlier, which might be why I wasn’t seeing the errors you were encountering. I’ve now added all your suggested changes, and your solution seems like the best approach for now. |
regulartim
left a comment
There was a problem hiding this comment.
This is almost ready to merge. A few minor things.
frontend/.eslintrc.json
Outdated
There was a problem hiding this comment.
Can "jest": true be removed?
.github/workflows/_node.yml
Outdated
| @@ -185,3 +193,17 @@ | |||
| working-directory: ${{ inputs.working_directory }} | |||
| shell: bash | |||
There was a problem hiding this comment.
This can also be removed i guess.
| - name: Run vitest tests | ||
| if: ${{ inputs.use_vitest }} | ||
| id: vitest-tests | ||
| run: | | ||
| if [[ '${{ inputs.use_coverage }}' != 'false' ]]; then | ||
| CMD="npm run test-coverage" | ||
| else | ||
| CMD="npm test" | ||
| fi | ||
| echo "Running command: ${CMD}" | ||
| $CMD | ||
| working-directory: ${{ inputs.working_directory }} | ||
| shell: bash |
There was a problem hiding this comment.
Nice, but unlike the Jest step, it doesn't upload coverage to $GITHUB_STEP_SUMMARY. Can you add that please?
| use_coverage: | ||
| description: Output coverage. Require jest to be set. | ||
| default: false | ||
| type: boolean |
There was a problem hiding this comment.
Please update jest -> vitest
There was a problem hiding this comment.
Now that we are at it, CI tests on Node 20 only. We should match that with the version in the Dockerfile, which is currently 24.
|
Yeah sure, just give me a couple of minutes I’ll implement all of them. |
|
Take your time, I will review and merge tomorrow. |
|
This pull request sets up GitHub code scanning for this repository. Once the scans have completed and the checks have passed, the analysis results for this pull request branch will appear on this overview. Once you merge this pull request, the 'Security' tab will show more code scanning analysis results (for example, for the default branch). Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results. For more information about GitHub code scanning, check out the documentation. |
regulartim
left a comment
There was a problem hiding this comment.
Nice work, thanks! :) The coverage report looks a little odd, but I will fix that myself.
|
Thanks for fixing them :) |
Description
I have successfully migrated the frontend testing framework from Jest to Vitest. This change aligns our testing environment with the recently adopted Vite build system, making the development experience faster and more consistent.
Here is what I did:
jestand its related Babel presets to clean up the dependencies.vitestand configured it directly in vite.config.js. I also added a vitest.setup.js file to handle global configurations and polyfillglobal.jest = viso we didn't have to rewrite every single test file immediately.importOriginalpattern and created a simplified mock for the Select component. This ensures the test focuses on our application logic (like URL updates) rather than the internal behavior of the dropdown.I verified everything by running the full test suite (
npm test), and all 51 tests passed successfully. I also checked that the linter is happy and the production build works.Related issues
Closes #817
Type of change
Please delete options that are not relevant.
Checklist
develop.Ruff) gave 0 errors. If you have correctly installed pre-commit, it does these checks and adjustments on your behalf.