Migrate testing setup from Jest to Vitest

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        commands: [tsc, 'format:ci', eslint, build, test, test-coveralls]
+        commands: [tsc, 'format:ci', eslint, build, 'test --bail=1', test-coveralls]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -43,5 +43,5 @@ jobs:
         if: matrix.commands == 'test-coveralls'
         uses: coverallsapp/github-action@master
         with:
-          path-to-lcov: lcov.info
+          path-to-lcov: coverage/lcov.info
           github-token: ${{ secrets.GITHUB_TOKEN }}

CONTRIBUTING.md

@@ -16,10 +16,10 @@ To start contributing, create a fork from our repo and send a PR. Refer to [this
 
 The frontend comes with an extensive test suite. To run the tests after you made your modifications, run
 `yarn test`. Regression tests are run automatically when you want to push changes to this repository.
-The regression tests are generated using `jest` and stored as snapshots in `src/\_\_tests\_\_`. After modifying the frontend, carefully inspect any failing regression tests reported in red in the command line. If you are convinced that the regression tests and not your changes are at fault, you can update the regression tests by running:
+The regression tests are generated using `vitest` and stored as snapshots in `src/\_\_tests\_\_`. After modifying the frontend, carefully inspect any failing regression tests reported in red in the command line. If you are convinced that the regression tests and not your changes are at fault, you can update the regression tests by running:
 
 ```bash
-yarn test --updateSnapshot
+yarn test --update
 ```
 
 ## Manually testing the frontend

package.json

@@ -21,9 +21,11 @@
     "format:scss": "prettier --list-different --parser scss \"src/**/*.scss\"",
     "format:ci": "yarn run format:tsx && yarn run format:scss",
     "start": "rsbuild dev",
-    "test": "cross-env TZ=Asia/Singapore jest",
+    "test": "cross-env TZ=Asia/Singapore vitest run",
+    "test:watch": "cross-env TZ=Asia/Singapore vitest",
+    "test:ui": "cross-env TZ=Asia/Singapore vitest --ui --no-open",
     "test-coveralls": "./scripts/test-coveralls.sh",
-    "update-ui-snapshots": "jest --updateSnapshot",
+    "update-ui-snapshots": "vitest run --update",
     "eslint": "eslint src",
     "prepare": "husky",
     "preview": "rsbuild preview"
@@ -122,7 +124,6 @@
     "@rsbuild/plugin-svgr": "^1.2.0",
     "@svgr/webpack": "^8.0.0",
     "@swc/core": "^1.11.22",
-    "@swc/jest": "^0.2.38",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
@@ -134,7 +135,6 @@
     "@types/gapi.client.drive-v3": "^0.0.5",
     "@types/google.picker": "^0.0.51",
     "@types/identity-obj-proxy": "^3",
-    "@types/jest": "^29.0.0",
     "@types/js-cookie": "^3.0.6",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.195",
@@ -147,7 +147,9 @@
     "@types/redux-mock-store": "^1.0.3",
     "@types/showdown": "^2.0.1",
     "@types/xml2js": "^0.4.11",
-    "babel-jest": "^29.7.0",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "@vitest/coverage-v8": "3.2.4",
+    "@vitest/ui": "^3.2.4",
     "buffer": "^6.0.3",
     "canvas": "^3.1.0",
     "constants-browserify": "^1.0.0",
@@ -161,8 +163,7 @@
     "https-browserify": "^1.0.0",
     "husky": "^9.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^25.0.1",
     "npm-run-all2": "^8.0.0",
     "os-browserify": "^0.3.0",
     "path": "^0.12.7",
@@ -181,6 +182,7 @@
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.1.0",
     "url": "^0.11.1",
+    "vitest": "^3.2.4",
     "webpack-bundle-analyzer": "^4.9.0"
   },
   "browserslist": {

rsbuild.config.ts

@@ -1,10 +1,10 @@
+import { InjectManifest } from '@aaroon/workbox-rspack-plugin';
 import { defineConfig, loadEnv } from '@rsbuild/core';
 import { pluginEslint } from '@rsbuild/plugin-eslint';
 import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
 import { pluginSvgr } from '@rsbuild/plugin-svgr';
-import { InjectManifest } from '@aaroon/workbox-rspack-plugin';
 
 const { publicVars, rawPublicVars } = loadEnv({ prefixes: ['REACT_APP_'] });
 
@@ -91,13 +91,15 @@ export default defineConfig({
         (warning: any) => {
           // Ignore the warnings that occur because js-slang uses dynamic imports
           // to load Source modules
-          const moduleName = warning.moduleDescriptor?.name
-          if (!moduleName) return false
+          const moduleName = warning.moduleDescriptor?.name;
+          if (!moduleName) return false;
 
-          if (!/js-slang\/dist\/modules\/loader\/loaders.js/.test(moduleName)) return false
-          return /Critical dependency: the request of a dependency is an expression/.test(warning.message)
+          if (!/js-slang\/dist\/modules\/loader\/loaders.js/.test(moduleName)) return false;
+          return /Critical dependency: the request of a dependency is an expression/.test(
+            warning.message
+          );
         }
-        
+
         // {
         //   // Ignore warnings for dependencies that do not ship with a source map.
         //   // This is because we cannot do anything about our dependencies.
@@ -124,7 +126,7 @@ export default defineConfig({
         new InjectManifest({
           swSrc: './src/service-worker.ts',
           swDest: 'service-worker.js',
-          maximumFileSizeToCacheInBytes: 20 * 1024 * 1024,
+          maximumFileSizeToCacheInBytes: 20 * 1024 * 1024
         })
       ];
 

scripts/test-coveralls.sh

@@ -3,5 +3,5 @@
 set -euo pipefail
 
 ./scripts/coverage-fix.sh do && \
-  yarn test --coverage --coverageReporters=text-lcov \
-    --collectCoverageFrom='!**/src/features/game/**' > lcov.info
+  yarn test --coverage --coverage.reporter=lcov \
+    --coverage.exclude='**/src/features/game/**'

src/commons/__tests__/__snapshots__/ContentDisplay.tsx.snap → src/commons/__tests__/__snapshots__/ContentDisplay.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContentDisplay page renders correctly 1`] = `
 <div

src/commons/__tests__/__snapshots__/Markdown.tsx.snap → src/commons/__tests__/__snapshots__/Markdown.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Markdown page renders correctly 1`] = `
 <div

src/commons/application/__tests__/Application.test.tsx

@@ -0,0 +1,19 @@
+import { useTypedSelector } from 'src/commons/utils/Hooks';
+import { shallowRender } from 'src/commons/utils/TestUtils';
+import { Mock, vi } from 'vitest';
+
+import Application from '../Application';
+
+vi.mock('react-redux', () => ({
+  useDispatch: vi.fn(),
+  useSelector: vi.fn()
+}));
+const useSelectorMock = useTypedSelector as Mock;
+
+test('Application renders correctly', () => {
+  useSelectorMock.mockReturnValue({ name: 'Bob' });
+
+  const app = <Application />;
+  const tree = shallowRender(app);
+  expect(tree).toMatchSnapshot();
+});

src/commons/application/__tests__/__snapshots__/Application.tsx.snap → src/commons/application/__tests__/__snapshots__/Application.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Application renders correctly 1`] = `
 <Context.Provider

src/commons/application/__tests__/__snapshots__/ApplicationTypes.ts.snap → src/commons/application/__tests__/__snapshots__/ApplicationTypes.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`available Python language configurations matches snapshot 1`] = `
+exports[`available Python language configurations > matches snapshot 1`] = `
 [
   {
     "chapter": -4,
@@ -14,7 +14,7 @@ exports[`available Python language configurations matches snapshot 1`] = `
 ]
 `;
 
-exports[`available Scheme language configurations matches snapshot 1`] = `
+exports[`available Scheme language configurations > matches snapshot 1`] = `
 [
   {
     "chapter": -9,
@@ -69,7 +69,7 @@ exports[`available Scheme language configurations matches snapshot 1`] = `
 ]
 `;
 
-exports[`available Source language configurations matches snapshot 1`] = `
+exports[`available Source language configurations > matches snapshot 1`] = `
 [
   {
     "chapter": 1,
@@ -256,4 +256,4 @@ exports[`available Source language configurations matches snapshot 1`] = `
 ]
 `;
 
-exports[`getLanguageConfig throws an error for an invalid chapter/variant combination 1`] = `"Language config not found for chapter 5 variant default"`;
+exports[`getLanguageConfig > throws an error for an invalid chapter/variant combination 1`] = `[Error: Language config not found for chapter 5 variant default]`;

src/commons/application/actions/__tests__/SessionActions.ts → src/commons/application/actions/__tests__/SessionActions.test.ts

@@ -600,12 +600,12 @@ test('updateTeamFormationOverviews generates correct action object', () => {
   });
 });
 
-test('updateGrading generates correct action object', () => {
+test('updateGrading generates correct action object', async () => {
   const submissionId = 3;
   const grading: GradingQuery = {
     answers: [
       {
-        question: jest.genMockFromModule('../../../../features/grading/GradingTypes'),
+        question: await vi.importMock('../../../../features/grading/GradingTypes'),
         student: {
           name: 'test student',
           username: 'E0123456',

src/commons/application/reducers/__tests__/SessionReducer.ts → src/commons/application/reducers/__tests__/SessionReducer.test.ts

@@ -404,7 +404,7 @@ test('UPDATE_ASSESSMENT_OVERVIEWS works correctly in updating assessment overvie
 const gradingTest1: GradingQuery = {
   answers: [
     {
-      question: jest.genMockFromModule('../../../../features/grading/GradingTypes'),
+      question: await vi.importMock('../../../../features/grading/GradingTypes'),
       student: {
         name: 'test student',
         username: 'E0123456',
@@ -432,7 +432,7 @@ const gradingTest1: GradingQuery = {
 const gradingTest2: GradingQuery = {
   answers: [
     {
-      question: jest.genMockFromModule('../../../../features/grading/GradingTypes'),
+      question: await vi.importMock('../../../../features/grading/GradingTypes'),
       student: {
         name: 'another test student',
         username: 'E0000000',